0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · レッスン

NextAuth.jsの統合

Next.jsアプリケーションで簡単かつ安全な認証を実現するため、NextAuth.jsを設定・構成します

「NextAuth.jsの統合」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。 これはレッスン1/6です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはNext.js 15 Fullstack (App Router + Server Actions)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack (App Router + Server Actions)コースには全6レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Auth with Next.js 15

Welcome to Integrating NextAuth.js! In modern web applications, user authentication is crucial. It allows users to sign in, proves their identity, and grants them access to personalized content.

Implementing authentication from scratch can be complex and error-prone, involving secure password hashing, session management, and protecting against various attacks.

Introducing NextAuth.js

NextAuth.js (now often referred to as Auth.js) is a complete open-source authentication solution for Next.js applications. It simplifies adding authentication to your project significantly.

  • Easy Setup: Get authentication working quickly with minimal configuration.
  • Multiple Providers: Supports various authentication methods like Google, GitHub, Email, or custom credentials.
  • Secure: Handles many security best practices for you.
  • Flexible: Works seamlessly with both Client and Server Components.

Installation

First, let's install the next-auth package in your Next.js project. Open your terminal in the project root and run:

You'll also need to configure environment variables for security and proper functioning.

npm install next-auth

NextAuth.js Configuration

In Next.js 15 (App Router), NextAuth.js uses a configuration file, typically auth.ts, to define how authentication works. This file exports a configuration object that includes your authentication providers.

You also need to set an environment variable, AUTH_SECRET, which is used to sign and encrypt session tokens. It should be a long, random string.

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials, req) {
        // Logic to verify user credentials
        // Return user object if successful, null otherwise
        return null; 
      }
    })
  ],
  pages: {
    signIn: '/auth/signin',
  }
});

Credentials Provider

The Credentials Provider allows users to sign in with a username/email and password. You define the input fields (credentials) and provide an authorize function.

The authorize function is where you'll verify the user's input against your database. For this example, we'll use a simple hardcoded check.

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text", placeholder: "test" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials) {
        if (credentials?.username === "user" && credentials?.password === "pass") {
          return { id: "1", name: "Test User", email: "test@example.com" };
        }
        return null; // Authentication failed
      }
    })
  ],
  pages: {
    signIn: '/auth/signin',
  }
});

Sign-in Page Component

Now, let's create a client component that provides a sign-in form. We'll use the signIn function exported from our auth.ts file (or next-auth/react if preferred for client components).

This component will handle user input and trigger the authentication flow using the Credentials Provider we configured.

// app/auth/signin/page.tsx (Client Component)
'use client';

import { signIn } from "next-auth/react";
import { useState } from "react";

export default function SignInPage() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const result = await signIn('credentials', {
      username,
      password,
      redirect: false, // Don't redirect automatically
    });

    if (result?.error) {
      alert(result.error);
    } else {
      window.location.href = '/'; // Redirect on success
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Username (user)"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password (pass)"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Sign In</button>
    </form>
  );
}

Displaying Session Data

Once a user is signed in, you can access their session information. In Server Components, you can directly use the auth() function from auth.ts to get the session data.

This is great for rendering UI based on the logged-in user or fetching user-specific data on the server.

// app/page.tsx (Server Component)
import { auth, signOut } from "@/auth"; // Adjust path if needed

export default async function HomePage() {
  const session = await auth();

  return (
    <div>
      <h1>Welcome!</h1>
      {session?.user ? (
        <div>
          <p>Signed in as {session.user.name || session.user.email}</p>
          {/* SignOut button would be in a Client Component */}
        </div>
      ) : (
        <p>Not signed in. <a href="/auth/signin">Sign In</a></p>
      )}
    </div>
  );
}

Implementing Sign Out

Allowing users to sign out is just as important as signing in. You can use the signOut function from next-auth/react in a Client Component.

When called, signOut clears the user's session and typically redirects them to a specified page (like the homepage or a sign-in page).

// app/components/SignOutButton.tsx (Client Component)
'use client';

import { signOut } from "next-auth/react";

export default function SignOutButton() {
  return (
    <button onClick={() => signOut({ callbackUrl: '/' })}> 
      Sign Out
    </button>
  );
}

NextAuth.js Options

NextAuth.js offers many configuration options to customize behavior. In your auth.ts, you can define:

  • pages: Custom URLs for sign-in, sign-out, error pages.
  • callbacks: Functions to control what happens when a user signs in, updates their session, or creates a JWT.
  • session: Configure session storage (JWT or database).
  • secret: The AUTH_SECRET environment variable.

These options provide powerful control over the authentication flow and user experience.

Quick Check

Which file is primarily used to configure NextAuth.js providers and callbacks in a Next.js 15 App Router project?

Recap & Next Steps

You've successfully learned the basics of integrating NextAuth.js into your Next.js 15 application!

  • We installed NextAuth.js.
  • Configured auth.ts with a Credentials Provider.
  • Created client components for sign-in and sign-out.
  • Accessed session data in server components.

In the next lesson, we'll explore how to protect routes and data based on user authentication status using Next.js middleware and server-side checks.

よくある質問

「NextAuth.jsの統合」レッスンは無料ですか？

はい。「NextAuth.jsの統合」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack (App Router + Server Actions)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack (App Router + Server Actions)コースには全6レッスンが含まれています。

「NextAuth.jsの統合」で何を学びますか？

Next.jsアプリケーションで簡単かつ安全な認証を実現するため、NextAuth.jsを設定・構成します ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack (App Router + Server Actions)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Next.js 15 Fullstack (App Router + Server Actions)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack (App Router + Server Actions)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/6です。

「NextAuth.jsの統合」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このNext.js 15 Fullstack (App Router + Server Actions)レッスンでコードを書いて実行できますか？

はい。すべてのNext.js 15 Fullstack (App Router + Server Actions)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. NextAuth.jsの統合
  2. JWT戦略の実装
  3. ルートとデータの保護
  4. ガードとロール
  5. カスタム認証戦略
  6. Passport.jsの統合
← Next.js 15 Fullstack (App Router + Server Actions)に戻る