OAuth

Besides the magic link, OAuth is another commonly used method to authenticate users.

OAuth is an authorization framework that allows users to grant third-party apps access to their data using services like Google, GitHub, or social media accounts without sharing their credentials.

In this lesson, we are going to demonstrate how to allow users to sign in using their GitHub account.

Registering an OAuth app on GitHub

The first thing you must do is to set up an OAuth app with GitHub. This tells GitHub that it is OK to share data with our SaaS application.

Go to Settings -> Developer Settings -> OAuth Apps, and click on the New OAuth app button.

You will be directed to the following page where you need to provide some information regarding your app.

The application name can be anything you want, and the homepage URL is the production URL for the app, which points to the homepage.

The authorization callback URL is the API endpoint within your SaaS platform, which allows GitHub to communicate with the app.

Since we are using Auth.js, the API endpoint has already been configured to be <url>/api/auth/callback/github.

Click on Register application, and you should see the following page.

Generate a client secret,

And save the client ID and client secret inside your .env, we are going to use them later.

.env

env

1AUTH_SECRET=". . ." # Added by `npx auth`. Read more: https://cli.authjs.dev
2DATABASE_URL="file:./database.sqlite"
3AUTH_RESEND_KEY=". . ."
4
5AUTH_GITHUB_ID="<client_id>"
6AUTH_GITHUB_SECRET="<client_secret>"

Make sure they are named AUTH_GITHUB_ID and AUTH_GITHUB_SECRET, so that Auth.js can access then automatically.

Setting up OAuth in Auth.js

Next, we need to update our auth.js so that it works with GitHub.

libs/auth.js

javascript

1. . .
2import GitHub from "next-auth/providers/github";
3. . .
4
5export const { handlers, signIn, signOut, auth } = NextAuth({
6  adapter: PrismaAdapter(prisma),
7  providers: [
8    Resend(. . .),
9    GitHub,
10  ],
11  pages: {. . .},
12  session: {. . .},
13});

Import the GitHub provider, and add it next to our existing Resend provider. Auth.js allows us to define multiple providers and they'll work seamlessly together.

And finally, update our sign in uer interface to include the GitHub option:

signin/page.jsx

jsx

1import { signIn } from "@/libs/auth";
2
3export default function SignIn() {
4  return (
5    <div className="flex flex-col gap-4 min-h-[80vh] items-center justify-center bg-gray-100">
6      . . .
7      <form
8        className="w-full max-w-sm rounded-lg bg-white p-8 shadow-md"
9        action={async () => {
10          "use server";
11          await signIn("github");
12        }}>
13        <button
14          type="submit"
15          className="w-full rounded-md bg-green-600 px-4 py-2 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
16          Sign in with GitHub
17        </button>
18      </form>
19    </div>
20  );
21}

We are using the same signIn() function to perform the sign in operation, except this time, you need to use the signIn("github") option.

Click on Sign in with GitHub:

You'll be directed to this authorization page hosted by GitHub:

Authorize the app, and you'll be directed back to your SaaS platform, and you will be signed in.

OAuth

Registering an OAuth app on GitHub

Setting up OAuth in Auth.js

Updating the sign in page