Web Developers : 6-Enabling GitHub Third-Party Authentication in Next.js with Supabase

Screenshot from the tutorial

Enabling GitHub Third-Party Authentication in Next.js with Supabase

In today's tutorial, we'll explore how to enable GitHub third-party authentication in a Next.js application using Supabase. This integration allows users to authenticate via their GitHub accounts, enhancing user experience and security. We'll break down the process step by step.

Prerequisites

Before we begin, ensure you have the following:

1. Node.js installed on your machine.
2. A Next.js application set up. You can create one using:

   npx create-next-app@latest my-next-app
   

3. A Supabase account. Sign up at Supabase.io if you don't have one.
4. A GitHub account for OAuth integration.

Step 1: Set Up Supabase

1. Create a New Project

1. Log in to your Supabase account.
2. Click on New Project and fill in the required details (name, password, database region).
3. Wait for the project to initialize.

2. Configure Authentication

1. In your Supabase project dashboard, navigate to the Authentication section.
2. Click on the Settings tab, then find the External OAuth Providers section.
3. Enable GitHub by filling out the required fields.

GitHub OAuth Credentials

1. Go to your GitHub Developer Settings.
2. Click on New OAuth App.
3. Fill in the Application Name, Homepage URL (e.g., http://localhost:3000 for local testing), and Authorization callback URL (e.g., http://localhost:3000/api/auth/callback/github).
4. Once created, copy the Client ID and Client Secret. These will be used in Supabase.

3. Add GitHub Credentials to Supabase

1. Back in the Supabase dashboard, paste the Client ID and Client Secret into the respective fields.
2. Save your changes.

Step 2: Set Up Next.js for Authentication

1. Install Dependencies

Navigate to your Next.js project directory and install Supabase and necessary packages:

cd my-next-app
npm install @supabase/supabase-js next-auth

2. Configure the Supabase Client

Create a file named supabaseClient.js in the lib directory to initialize Supabase:

// lib/supabaseClient.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.SUPABASE_URL;
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

3. Create a NextAuth Configuration

Create a new file named [...nextauth].js inside the pages/api/auth directory:

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';

export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  pages: {
    signIn: '/auth/signin',
  },
});

4. Configure Environment Variables

Create a .env.local file in your project root and set your Supabase and GitHub credentials:

SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret

Step 3: Implement Authentication Flow in Components

1. Create a Sign-In Page

Create a new file named signin.js in the pages/auth directory:

// pages/auth/signin.js
import { signIn } from 'next-auth/react';

const SignIn = () => {
  return (
    <div>
      <h1>Sign In</h1>
      <button onClick={() => signIn('github')}>Sign in with GitHub</button>
    </div>
  );
};

export default SignIn;

2. Create a Protected Page

To demonstrate authentication, create a new page named dashboard.js:

// pages/dashboard.js
import { getSession } from 'next-auth/react';

const Dashboard = ({ session }) => {
  if (!session) return <p>Access Denied</p>;

  return (
    <div>
      <h1>Welcome, {session.user.name}</h1>
      <p>Your email: {session.user.email}</p>
    </div>
  );
};

export async function getServerSideProps(context) {
  const session = await getSession(context);

  return {
    props: { session },
  };
}

export default Dashboard;

Step 4: Running Your Application

1. Start your Next.js application:

   npm run dev
   

2. Navigate to http://localhost:3000/auth/signin and click on the "Sign in with GitHub" button.

3. After successful authentication, you should be redirected to the dashboard.

Conclusion

You have successfully set up GitHub third-party authentication in your Next.js application using Supabase. This setup enhances user engagement and leverages the security features provided by GitHub.

Feel free to explore and extend this functionality based on your project needs. Happy coding!

Additional Resources

• Next.js Documentation
• Supabase Documentation
• NextAuth.js Documentation

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios