Next.js App Router & Auth.js (next-auth v5) に入門する

npm install next-auth@beta

npx auth secret

Secret generated. Copy it to your .env/.env.local file (depending on your framework):

AUTH_SECRET=GENERATETD_RANDOM_VALUE

AUTH_SECRET=GENERATETD_RANDOM_VALUE

import NextAuth from "next-auth"
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [],
})

import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

export { auth as middleware } from "@/auth"

AUTH_GOOGLE_ID={CLIENT_ID}
AUTH_GOOGLE_SECRET={CLIENT_SECRET}

import NextAuth from "next-auth"
import Google from "next-auth/providers/google"
 
export const { signIn, signOut, auth } = NextAuth({
  providers: [Google],
})

import { signIn } from '@/auth';

function SignIn() {
  return (
    <form
      action={async () => {
        'use server';
        await signIn('google');
      }}
    >
      <button
        type='submit'
        className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'
      >
        Sign in with Google
      </button>
    </form>
  );
}

  providers,
  callbacks: {
    jwt({ token, user }) {
      if (user) { // User is available during sign-in
        token.id = user.id
      }
      return token
    },
    session({ session, token }) {
      session.user.id = token.id
      return session
    },
  },
}

    jwt: ({ user, token, account }) => {
      return {
        ...token,
+        foo: 'bar',
      };
    },

import { decode } from 'next-auth/jwt';

export interface JWTDecodeParams {
  /** Used in combination with `secret`, to derive the encryption secret for JWTs. */
  salt: string
  /**
   * Used in combination with `salt`, to derive the encryption secret for JWTs.
   *
   * @note
   * You can also pass an array of secrets, in which case the first secret that successfully
   * decrypts the JWT will be used. This is useful for rotating secrets without invalidating existing sessions.
   * The newer secret should be added to the start of the array, which will be used for all new sessions.
   */
  secret: string | string[]
  /** The Auth.js issued JWT to be decoded */
  token?: string
}

import { decode } from 'next-auth/jwt';

const SESSION_NAME = 'authjs.session-token';

const TOKEN = 'eyJ......';

const decoded = await decode({
  salt: SESSION_NAME,
  secret: process.env.AUTH_SECRET!,
  token: TOKEN,
});

console.log('decoded', decoded);

bun run scripts/main.mts

decoded {
  sub: "xxxxxxxxxxxxxx",
  uid: "xxxxxxxxxxxxxx",
  iat: 1715269183,
  exp: 1717861183,
  jti: "ec4e8678-6e12-4f62-9487-5a55aee6b4a4",
  foo: "bar"
}

callbacks: {
  async session({ session, token, user }) {
    // Send properties to the client, like an access_token from a provider.
    session.accessToken = token.accessToken
 
    return session
  }
}

  providers,
  callbacks: {
    session({ session, user }) {
      session.user.id = user.id
      return session
    },
  }
}

declare module "next-auth" {
  /**
   * The shape of the user object returned in the OAuth providers' `profile` callback,
   * or the second parameter of the `session` callback, when using a database.
   */
  interface User {}
  /**
   * The shape of the account object returned in the OAuth providers' `account` callback,
   * Usually contains information about the provider being used, like OAuth tokens (`access_token`, etc).
   */
  interface Account {}
 
  /**
   * Returned by `useSession`, `auth`, contains information about the active session.
   */
  interface Session {}
}
 
// The `JWT` interface can be found in the `next-auth/jwt` submodule
import { JWT } from "next-auth/jwt"
 
declare module "next-auth/jwt" {
  /** Returned by the `jwt` callback and `auth`, when using JWT sessions */
  interface JWT {
    /** OpenID ID Token */
    idToken?: string
  }
}

import NextAuth from "next-auth"
 
declare module 'next-auth' {
  /**
   * The shape of the user object returned in the OAuth providers' `profile` callback,
   * or the second parameter of the `session` callback, when using a database.
   */
  interface User {
    foo: string;
  }
}

export const { handlers, signIn, signOut, auth } = NextAuth({
  //...
  providers: [
    //...
    Credentials({
      credentials: {},
      authorize: async () => {
        return {
          foo: 'bar',
        };
      },
    }),
  ],
  callbacks: {
    jwt({ token, user }) {
      const value = user.foo;

      //...
    },
    //...
  },
})

  authorize: (
    /**
     * The available keys are determined by {@link CredentialInput}.
     *
     * @note The existence/correctness of a field cannot be guaranteed at compile time,
     * so you should always validate the input before using it.
     *
     * You can add basic validation depending on your use case,
     * or you can use a popular library like [Zod](https://zod.dev) for example.
     */
    credentials: Partial<Record<keyof CredentialsInputs, unknown>>,
    /** The original request. */
    request: Request
  ) => Awaitable<User | null>