NextAuth.js Intro [1 of 3]: One-Click Signup

One-click signup using Google, Facebook, or any other existing provider is a desirable feature for most web applications, since it makes it faster and easier for people to create accounts. Integrating one-click signup with Next.js or any other isomorphic web framework can take a fair bit of work, but the fantastic [next-auth](https://next-auth.js.org/) package makes it incredibly easy and flexible.

Let's generate our app as we normally would, then add next-auth.

yarn create next-app next-auth-example
yarn add next-auth

Create an account for every provider you want users to be able to log in to your site with. I'm using Google and GitHub in this example, but next-auth supports a ton so go crazy.

GOOGLE_CLIENT_ID=123123123
GOOGLE_CLIENT_SECRET=abcabcabc
GITHUB_CLIENT_ID=123123
GITHUB_CLIENT_SECRET=abcabc

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

const options = {
  // Configure one or more authentication providers
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],

  pages: {
    signIn: '/auth/signIn',
  },

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

export default (req, res) => NextAuth(req, res, options);

Now we'll add the next-auth session state to our _app.js so that it's available everywhere via the useSession hook. We'll also add Chakra's theme information to the application in the same manner, so we can style everything pretty easily.

import { Provider } from 'next-auth/client';

function MyApp({ Component, pageProps }) {
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

next-auth also requires the NEXTAUTH_URL environment variable for some functionality, so your .env file should now look something like this.

GOOGLE_CLIENT_ID=123123123
GOOGLE_CLIENT_SECRET=abcabcabc
GITHUB_CLIENT_ID=123123
GITHUB_CLIENT_SECRET=abcabc
NEXTAUTH_URL=http://localhost:3000

import styles from '../styles/Home.module.css';
import { useSession, signIn, signOut } from 'next-auth/client';

export default function Home() {
  const [session] = useSession();

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h1 className={styles.title}>This is the welcome page.</h1>

        <h2>You're currently {session ? 'logged in.' : 'logged out.'}</h2>

        {session ? (
          <button onClick={signOut}>Log out.</button>
        ) : (
          <button onClick={signIn}>Log in.</button>
        )}
      </main>
    </div>
  );
}

First we call the useSession hook to determine login status.

The next-auth useSession hook is multi-purpose. By returning an object in the session variable (and not a falsy value), it tells us whether the person is logged in or logged out respectively. It can also return a second loading boolean to tell us whether it's currently checking session status; we're not doing it in this example, but that's useful if you want to show a loading spinner while it's checking.

Then we add the Log in and Log out links that trigger the default signIn and signOut functions provided by next-auth. Now we've got basic one-click login functionality already. 🎉

The other purpose of useSession is getting information about the logged-in user. If session exists, it'll have user information inside of it. So if we add this line to the index.js page:

{session && session.user && <h3>Logged in as {session.user.name}</h3>}