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-authps: 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. ts
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.
