| 2022-10-03

Next Auth with Google

    NextAuth.js for Next.js provides built-in authentication via google. Follow the steps below to enable user authentication from your google account.

    You can start with a clean Next.js installation to follow along.

    1. Install NextAuth. From the root of your project folder, enter the following command in a terminal.
    yarn add next-auth
    
    bash
    1. Create a file called [...nextauth].js in pages/api/auth. Add the following code to the file.
    import NextAuth from "next-auth/next";
    import GoogleProvider from "next-auth/providers/google";
    
    export default NextAuth({
      providers: [
        GoogleProvider({
          clientId: process.env.GOOGLE_CLIENT_ID,
          clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        }),
      ],
      secret: process.env.JWT_SECRET,
    });
    
    javascript
    1. In the pages/_app.js file, import the next-auth SessionProvider. Wrap the app data in the SessionProvider as indicated below.
    import { SessionProvider } from "next-auth/react";
    
    function MyApp({ Component, pageProps, session }) {
      return (
        <SessionProvider session={session}>
          <Component {...pageProps} />
        </SessionProvider>
      );
    }
    
    export default MyApp;
    
    javascript
    1. In your pages/index.js file import useSession, signIn and signOut methods from next-auth.

    Create a constant to hold the current auth session. Create two buttons. The first button's onClick property can run the signIn method and the second button can run signOut. Next add a div to display the logged-in user's name. This div should display if there is a current login session.

    import { useSession, signIn, signOut } from "next-auth/react";
    
    export default function Home() {
      const { data: session } = useSession();
      return (
        <div>
          <button onClick={() => signIn()}>Log In</button>
          <button onClick={() => signOut()}>Log Out</button>
          <div>{session && `Welcome ${session.user.name}`}</div>
        </div>
      );
    }
    
    javascript
    1. Create a .env file at the root of your Next.js project
    touch .env
    
    bash

    Inside the .env file you will store your google credentials, and other connection data.

    GOOGLE_CLIENT_ID=<your google client id>
    GOOGLE_CLIENT_SECRET=<your google client secret>
    NEXTAUTH_URL=<your NextAuth url>
    JWT_SECRET=<your jwt secret>
    
    javascript

    Paste in the proper data for each of these variables.

    Log into your Google account and go to Google Cloud Console to generate your credentials, the GOOGLE_CLIENT_ID and the GOOGLE_CLIENT_SECRET. Click on the + CREATE CREDENTIALS button. Select the OAuth Client ID option. Select Web Application as your "Application type". Enter a name for the credentials. Add a URI in the Authorized JavaScript Origins. For a Next.js project that will typically be http://localhost:3000. Note that for production deployment of your app you will need to add a procution url as well. Also add an Authorized redirect url as follows http://localhost:3000/api/auth/callback/google

    Google Cloud Console, credentials page

    Press Create. Copy the credentials generated.

    To generate your JWT_SECRET go to this url https://generate-secret.vercel.app/32 and copy the generated numeric string.

    1. Bonus display an image of the user from google account.

    First add the following code where your ui is being rendered (index.js in this example).

    {
      session && (
        <Image alt="user image" width={50} height={50} src={session.user.image} />
      );
    }
    
    javascript

    Next, update the next.config.js file to allow google user content url.

    module.exports = {
      images: {
        domains: ["lh3.googleusercontent.com"],
      },
    };
    
    javascript

    Get the code for this app here.


    Thanks for reading. If you enjoyed this post, I invite you to explore more of my site. I write about web development, programming, and other fun stuff.