Next.js Interview Questions

Last updated on 27 Mar, 2021


How can we implement Social Login in Next.js?


The recommended way is to use next-auth package. It supports many authentication services like Google, Github, Facebook and so on.



What are the steps involved in setting up next-auth?


First we need to obtain client id and client secret from the service which we are going to use. Then create a catch all file [...nextauth].js under pages/api/auth. This file handles the server side functionality of authentication.

import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    // ...add more providers here

  // A database is optional, but required to persist accounts in a database
  database: process.env.DATABASE_URL,

In the client side we can then check for logged in status and do appropriate logic like below:

import { signIn, signOut, useSession } from "next-auth/client";

export default function Page() {
  const [session, loading] = useSession();

  return (
      {!session && (
          Not signed in <br />
          <button onClick={() => signIn()}>Sign in</button>
      {session && (
          Signed in as {} <br />
          <button onClick={() => signOut()}>Sign out</button>
--- ○ ---