ProNextJS
    Loading
    lesson

    NextAuth v5 Update

    Jack HerringtonJack Herrington
    Code

    NextAuth v5 has been released, and there are some changes that affect the Next.js App Router. While the authorization code we've seen so far is similar, there have been some significant changes to the NextAuth API. The code on GitHub is always current with these updates.

    Moving the Auth Configuration

    The most significant change is that the auth configuration has been moved into a file called auth.ts, located in the src folder at the top level. This file contains all of the configuration options we've seen before, but at the bottom of the file, we now have access to new functions.

    • signIn and signOut functions from NextAuth, used for the user button
    • auth function, used throughout the application to get the current session
    • handlers, used in the API route
    // at the bottom of src/auth.ts

export const { handlers, auth, signIn, signOut }  = NextAuth(authOptions);

    Simplifying the API Route

    The API route for auth has been greatly simplified. It now imports the handlers from the auth.ts file using the path @/auth, and then exports the GET and POST methods from those handlers:

    // inside src/app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';

export const { GET, POST } = handlers;

    Layout Changes

    There are also a few changes to the layout. At the top of the file, instead of bringing in our own session provider that we had to wrap, we now import it directly from next-auth/react. We also import signIn, signOut, and auth from our auth.ts file:

    // inside src/app/layout.tsx
import { SessionProvider } from 'next-auth/react';
import { signIn, signOut, auth } from '@/auth';

    In the layout, we retrieve the current authorization and set up the user session. We extract the sensitive information from the session and only include the person's name, email, and image for the avatar:

    // inside RootLayout component in src/app/layout.tsx

const session = await auth();
if (session?.user) {
  session.user = {
    name: session.user.name,
    email: session.user.email,
    image: session.user.image,
  };
}

    The SessionProvider has been updated to require a basePath and the session:

    <SessionProvider basePath="/api/auth" session={session}>
  {/* ... */}
</SessionProvider>

    The UserButton now accepts onSignIn and onSignOut server actions, which wrap the signIn and signOut functions:

    // components/user-button.tsx
export default function UserButton({
  onSignIn,
  onSignOut,
}: {
  onSignIn: () => Promise<void>;
  onSignOut: () => Promise<void>;
}) {
  // ...
}

    Updating Server Information

    In any page that needs server information, we previously called getServerSession. Now, we call the auth function. We can alias auth to getServerSession and call it the same way:

    // inside src/app/chats/[chatId]/page.tsx
import { auth as getServerSession } from '@/auth';

    Middleware Changes

    Later in the course, we use middleware to protect the /chats route, which is the detail route when you go into a chat. The code here has also been updated, but the underlying logic remains the same, just with some different API calls.

    // src/middleware.ts

import { NextResponse } from "next/server";
import { auth } from "@/auth";

export const config = {
  matcher: ["/chats/:chatidx"],
};

export default auth((req) => {
  if (!req.auth) {
    return NextResponse.redirect(new URL("/api/auth/signin", req.url));
  }
});

    Keeping Up with Changes

    It's important to note that these libraries - Next.js, NextAuth, and others - are constantly evolving. While it may be inconvenient, the code in the repository is always the most up-to-date. Throughout the course, there will be occasional videos like this one to address these changes as they occur.

    Transcript