NextAuth Made Easy: Integrating Google and GitHub Authentication

in this article, we will understand how to add the feature of Login with Google/Github to be able to to authenticate the user using nextauthjs, so that we don’t have to write so many code for our application. so without furthur ado, let’s get right into it What exactly Login with google/github is: as the name suggest, login with google/github is just a way for you to be able to authenticate the user without email and password What is NextAuth nextauth is authentication solution for nextjs application. it provides a robust framework for managing user authentication and session, allowing developers to integrate various authentication providers such as Google, Github, Facebook etc… Advantages of nextauth:- Multiple authentication providers support for Oauth providers like Google, Twitter, Github. etc… it support email/password authentication as well Datebase Support It support various database like MySQL, PostgreQSL, MongoDB. etc… Session Managment Secure session handling with configuration session exploring and refresh mechanisms. Typescript Support fully type-safe, providing better development experince How to next-auth for login with Google/Github first install next-auth npm install next-auth Create folder structure something like this inside app folder app/api/auth/[…nextauth].route.ts import NextAuth from 'nextauth' import GoogleProvider from 'next-auth/providers/google' import GithubProvider from 'next-auth/providers/github' export const authOptions = { provider :[ GoogleProvider({ clientId:Process.env.GOOGLE_ID clientSecret:Process.env.GOOGLE_SECRET }), GithubProvider({ clientId:Process.env.GOOGLE_ID clientSecret:Process.env.GOOGLE_SECRET }) ] } export default NextAuth(authOptions) this is how you intergrate next-auth in your nextjs application, now let’s see how can we serve it in frontend client component and sever component Frontend Implementation (client component) import { useSession, signIn, signOut } from "next-auth/react" export default function Component() { const { data: session } = useSession() if (session){ return ( <> Signed in as {session.user.email} <button onClick={() => signOut()}>Sign out </> ) } return ( <> Not signed in <button onClick={() => signIn()}>Sign in </> ) } server component to session, pass authOptions which we create before in getServerSession const sesion = await getServerSession(authOption) Getting GOOGLE_ID and GOOGLE_SECRET first go into console.cloud.google.com create a project and select it after selecting, click on left three line then select APIs and services, after then first click on Oauth consent screen now click external add your app name , email in developer contact information add your own email then save and continue in Scopes just click save and continue in Test Users save and continue finally click back to Dashboard click that three button which is on left hand side and now select Credentials then click on +create credentials and select Oauth clientID In application Type select web app in Authorised javascript origins ADD URL: localhost:3000 REDRECT_URL:localhost:3000/api/auth/callback/google and click on create now, you will get your clientId and client secret that’s all in this article, thank you so much for reading blog thank you. https://sarfrazashrafi.hashnode.dev/nextauth-made-easy-integrating-google-and-github-authentication