How to Add Google Auth to Next Application

Introduction

For this tutorial we will be using next-auth to abstract some of the work for us. So let's first install next-auth. Go ahead and run npm install next-auth

ps: I am using "next-auth": "^5.0.0-beta.4"

auth.ts

We need to create auth.ts file in the root directory where we are going to add NextAuth.

import NextAuth, { Session } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

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

so obviously we will need to get GOOGLE_ID and GOOGLE_SECRET from Google Api console. You will find those under this url:https://console.cloud.google.com/apis.

Don't forget to add them to .env file.

You might need to create a new project and new api key. Follow google documentation or feel free to shoot me an email with any questions you have.

console screnshot

Important! Make sure to add the URI to Authorized redirect URIs. you can do so by clicking on the clientId in the screenshot above.

auth.ts fullcode screenshot:

auth.ts screenshot

Middleware.ts

To learn about middleware please refer to next documentation.

George's Blog