User Authentication with Google Next-Auth
Tags: react, nextjs, webdev, tutorial
Published: 2021-12-16 07:48:15

_by author [Tuduo Victory](https://blog.openreplay.com/authors/tuduo-victory)_

In user’s based application, there is a need for  user authentication and management to be able to provide services to different users. Rather than setting up complex login systems, NextJs provides us with the option to setup different modes of login integrations using the [Next-auth](https://next-auth.js.org/) package.

## Installing Dependencies

This tutorial makes use of the Next.js authentication package, if you do not have Next.js installed you can install it via the command line using the following command in CLI:

```
npm install create-next-app authentication
```

The above command creates a folder called `authentication` with the Next.js framework setup for use.
Next, you can  install the Next-authentication package with the following command:

```
npm i next-auth
```

With this, you will have all the dependencies required to follow up with this tutorial set up and can proceed with setting up user authentication in your next application. 


## What is JWT?

JSON Web Token (JWT) is a standard that is used to create tokens for granting users access to a particular web application. It works behind the scenes, and being generated by the server it certifies the user’s identity.  We will need to generate a token to use when integrating our google authentication.


## Creating our Google API route

To setup Google authentication in our Next.js app, we will need to create our API endpoints. Thanks to Next.js provision for API handling, we can easily create API routes in  the `pages/api` directory. In Next.js,  by default all files in this directory are automatically treated as API endpoints, making it simple to use.

For the authentication endpoint, create a folder name `auth` in the `pages/api` folder and within it create a file named `[…nextauth].js`. In this file. first we add imports for the Next-auth package:

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


Then we set up the API routes with the Google access credentials and JWT token.

```javascript
export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: "GOOGLE_CLIENT_ID",
      clientSecret: "GOOGLE_CLIENT_SECRET",
      authorizationUrl: 'https://accounts.google.com/o/oauth2/v2/auth?prompt=consent&access_type=offline&response_type=code',
    })
  ],
  jwt: {
    encryption: true
  },
  secret: "secret token",
  //Callback here
});
```


Above, we set up the Next-auth authentication provider as the Google authentication method. We will later add our access credentials to be able to make use of this and then create a JWT token which will authenticate the user.


## Using a callback to restrict unauthorized access

We can create a callback function to restrict access of unathorized users using the JWT token

```javascript
...
callbacks: {
    async jwt(token, account) {
      if (account ?.accessToken) {
        token.accessToken = account.accessToken
      }
      return token;
    },
    redirect: async (url, _baseUrl)=>{
      if (url === '/user') {
        return Promise.resolve('/')
      }
      return  Promise.resolve('/')
    }
}
});
```


We have setup a redirect URL that will redirect unauthenticated users who access the `user` route which we will later create,  or any other route back to the home page upon authentication.


## Configuring session states

To make use of Next-auth in the app, we will need to wrap our our `_app.js` file components as shown below:

```javascript
...
import { SessionProvider } from "next-auth/react";
function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}
export default MyApp;
```

## Open Source Session Replay
Debugging a web application in production may be challenging and time-consuming. [OpenReplay](https://github.com/openreplay/openreplay) is an Open-source alternative to FullStory, LogRocket and Hotjar. It allows you to monitor and replay everything your users do and shows how your app behaves for every issue.
It’s like having your browser’s inspector open while looking over your user’s shoulder.
OpenReplay is the only open-source alternative currently available.

![OpenReplay](https://raw.githubusercontent.com/openreplay/openreplay/main/static/replayer.png)

Happy debugging, for modern frontend teams - [Start monitoring your web app for free](https://github.com/openreplay/openreplay).



## Setting up the sign-in page functionality 

With Next-auth added to our application, we can now build our sign in page. First, we will set up our page to display the `Sign in` button if the user is not authenticated, else it returns our application. To do this, we modify the `index.js`  file as shown below:

```javascript
import { useSession, signIn, signOut } from "next-auth/react"

export default function Home() {
  const { data: session } = useSession();
  if (session) {
    return (
      <div className={styles.container}>
        Welcome user<br />
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    );
  }
  return (
    <div className={styles.container}>
      Click to sign into your user account <br />
      <button onClick={() => signIn()}>Sign in</button>
    </div>
  );
}
```
    

The code above checks if the user has `Session`. If there is no `Session`, the `Sign in` button is returned, else it returns the `Sign out` button.

With this setup we are almost ready to test our Google login functionality, we just need to add our access credentials to be able to make use of this service.


## Configuring Google Cloud Console API credentials

To get Google access credentials, you will need to login to the [Google Cloud console](https://console.developers.google.com/apis/credentials). Sign in using your Google account and create a new project. Under `+ Create credentials` in the top-menu bar select `OAuth Client id`. If requested to “Configure Consent Screen”, click on this button. On the new page that opens up, select `external` for the user type and click on `create`. Next, input your app name and email then save and continue. Leave the `scope` and `Test users` section empty and click on “Save and Continue”.
Back on the dashboard, repeat the first step and click on `Oauth Client id`.  Select “Web application” for the application type. Click on `Add URI` and enter `http://localhost`. Finally, in the  `Authorized redirect URIs` section, click `Add URI` and in the field provided, key in `http://localhost/api/auth/callback/google`. Then create the authentication key.  Copy the client ID and the client secret and add it to your application for use.

With this added, we can now log into the application using the Google email login. You can run your app via CLI with the following command and view it in your browser:

```
npm run dev
```

Note that after you’ve deployed your application to production, you’ll have to change the `localhost` part of that configuration into your actual host name.

## Creating a protected route

With Next-auth we can also set up protected routes. Create a file called `protectedpage.js` in the `pages` directory and populate it wilth the following code:

```javascript
import { getSession } from "next-auth/react";
import React from "react";
function protectedpage() {
  return (
    <div>
      <h1>Protected Page</h1>
    </div>
  );
}
export async function getServerSideProps(context) {
  const session = await getSession(context);
  if (!session) {
    context.res.writeHead(302, { Location: "/" });
    context.res.end();
    return {};
  }
  return {
    props: {
      user: session.user,
    },
  };
}
export default protectedpage;
```
    

The code above uses a function to check if `Session` exists to allow access to the page. If `Session` does not exist, the user will be redirected to the `"``/``"` route which is the home page of the application.

We can set up the  redirect page called `user.js` with the following code:

```javascript
import React from "react";
import { useSession } from "next-auth/react";
function user() {
  const { data: session } = useSession();
  if (!session) {
    return <p>You are not logged in.</p>;
  }
  return <h1>you are logged in</h1>;
}
export default user;
```


Then in the `protectedpage.js` file, we can set the header location to return us to the redirect page instead of the home page:

```javascript
...
context.res.writeHead(302, { Location: "/user" });
...
```


## Conclusion

We have come to the end of this tutorial where we learned how to integrate the Next-authentication package and make use of Google's main login in a Next application.