NextAuth.js with Google Provider for Seamless Authentication
Tags: nextjs, beginners, tutorial, learning
Published: 2023-07-10 20:03:48



## What are we talking about?
NextAuth.js is a powerful authentication library for Next.js applications that provides a simple and flexible way to implement authentication and authorization. It supports various authentication providers, including Google, which allows users to log in to your application using their Google accounts. In this blog post, we will explore how to integrate NextAuth.js with the Google provider, enabling seamless and secure authentication in your Next.js application.

_Side Note:_
_To follow along with this tutorial, you should have a basic understanding of Next.js, React, and JavaScript. Additionally, you'll need a Google account and a Next.js application set up._


**Install NextAuth.js and Dependencies**
First, create a new Next.js application or use an existing one. Open a terminal and navigate to your project's root directory. Install NextAuth.js and the required dependencies by running the following command:

```shell
npm install next-auth google
```


**Configure NextAuth.js**
Next, create a file called `next-auth.js` in the root directory of your Next.js application. This file will contain the configuration for NextAuth.js. Add the following code to the `next-auth.js` file:

```javascript
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  // Add any additional NextAuth.js configuration options here
});
```

In this configuration, we're specifying the Google provider by creating an instance of the `GoogleProvider` class and passing the `clientId` and `clientSecret` obtained from the Google Cloud Console. Ensure you have the respective environment variables set up or replace `process.env.GOOGLE_CLIENT_ID` and `process.env.GOOGLE_CLIENT_SECRET` with the actual values.


**Create the Google OAuth Credentials**
To obtain the `clientId` and `clientSecret`, you need to set up a project in the Google Cloud Console. Follow these steps:

1. Go to the [Google Cloud Console](https://console.cloud.google.com/).
2. Create a new project or select an existing one.
3. Enable the "Google+ API" by searching for it in the library and enabling it.
4. In the "Credentials" section, click on "Create Credentials" and select "OAuth client ID."
5. Choose "Web application" as the application type.
6. Enter a name for your OAuth client and add the authorized JavaScript origins and redirect URIs for your Next.js application.
7. After creating the OAuth client, you'll be provided with the `clientId` and `clientSecret` values.


**Implement the Sign-In Button**
To allow users to sign in using their Google accounts, add a sign-in button to your application's UI. In a React component, add the following code:

```javascript
import { signIn, signOut, useSession } from 'next-auth/client';

export default function Home() {
  const [session, loading] = useSession();

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!session) {
    return (
      <div>
        <button onClick={() => signIn('google')}>Sign in with Google</button>
      </div>
    );
  }

  return (
    <div>
      <p>Welcome, {session.user.name}</p>
      <button onClick={() => signOut()}>Sign out</button>
    </div>
  );
}
```

This code uses the `signIn` and `signOut` functions from the `next-auth/client` module to handle the authentication flow. When the user clicks the "Sign in with Google" button, it triggers the `signIn('google')` function, which initiates the Google OAuth flow.


**Protect Routes with Authentication**
To protect specific routes or components, you can use the `getSession` function from the `next-auth/client` module. For example, to protect a route, create a higher-order component (HOC) like this:

```javascript
import { getSession } from 'next-auth/client';
import { useRouter } from 'next/router';

export default function withAuth(Component) {
  return function WithAuth(props) {
    const router = useRouter();

    if (typeof window !== 'undefined' && !session) {
      router.replace('/login');
      return null;
    }

    return <Component {...props} />;
  };
}
```

Wrap the components you want to protect with the `withAuth` HOC, and it will redirect users to the login page if they're not authenticated.

**Try it!**
In this blog post, we explored how to integrate NextAuth.js with the Google provider, allowing users to authenticate with their Google accounts in a Next.js application. By following the steps outlined above, you can leverage NextAuth.js's simplicity and flexibility to implement secure authentication and authorization in your Next.js projects. Was it helpful? Go try it and let me know!