Setting up Next Auth to Register with Google
Published: 2024-01-02 09:55:18

Setting up Authentication for a project might seem difficult, but it is quite easy to enable **Google** authentication with **Next Auth**

I'm currently working on a next js social media app for practice and here's how to set up Google authentication quickly and easily

In your next JS project install the next-auth Library
[Checkout the docs](https://authjs.dev/reference/nextjs)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwuwx3blwnfzwo5c76z5.png)

We then copy this piece of code from the docs

```
import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"
export const { handlers, auth } = NextAuth({ providers: [ GitHub ] })

```

Create a file named auth.js or auth.ts (if using typescript)
create the file in the **lib ** folder (lib/auth.ts)

The code can now be modified for Google authentication

```
import NextAuth from "next-auth"
import Google from "next-auth/providers/google"
export const { handlers, auth } = NextAuth({ providers: [ Google ] })
```
Now we need the clientId and the clientSecret from Google.

Head to [Google Cloud console](https://console.cloud.google.com/)
and create a project or select one

Then in the sidebar under APIs and services select Credentials

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vba4v7x75a87ewn1afvf.png)

Then click on Create credentials

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lh5f7rmdsbu9bmcfn6t.png)

and then on OAuth Client ID

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21o5pczspgd8ga1v0k4m.png)

Select application type as Web application

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejvw02ltwjlhit4foit9.png)

Add Authorized JavaScript origins as http://localhost:3000 (during development)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7d3vw0eye23yjmc442z.png)
Then click on create 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hs68xy5zj1f3njswv42b.png)

Store the Credentials in your .env file

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq0r7jomevfg51zu2eic.png)

In the Credentials section go to your Web Client (or whatever if you changed the name)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoqryh5lzsqp7gpgahdd.png)

And add this in the authorized redirect URIs


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekeq8rlr6kbdd2qsjwvh.png)

In the .env file, you have to set NEXTAUTH_URL and NEXTAUTH_SECRET

Set the NEXAUTH_URL as http://localhost:3000/api/auth

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bq9ieka4kfdgpcpywft1.png)

And generate the NEXTAUTH_SECRET from this [openssl terminal](https://www.cryptool.org/en/cto/openssl)

```
openssl rand -base64 32
```
Now update the auth.ts file like this

```
export const {
	handlers: { GET, POST },
	auth,
	signIn,
	signOut,
} = NextAuth({
	providers: [
		Google({
			clientId: process.env.GOOGLE_ID,
			clientSecret: process.env.GOOGLE_CLIENT_SECRET,
		}),
	],
});

```

create a new route.ts file in the app/api/auth/[...nextauth]
folder.

It will only contain this

`export { GET, POST } from "@/lib/auth";
`

Create a form with an action

```
<form action={handleGoogleLogin}>
    <button>Sign Up with Google</button>
</form>
```

```
const handleGoogleLogin = async () => {
	"use server";
	await signIn("google");
};
```
the signIn function should be imported from the auth.ts file 
Your Google Authentication has been setup