🚀 Authenticate Your Next.js App with GitHub in 5 Easy Steps! 🤖

[beingshahidali]

Hi everyone,

Need to let users sign in with GitHub on your Next.js app? Look no further! We're gonna get your app authenticated using NextAuth.js in a way so simple, even your pet could do it! 🐶 (Okay, maybe not that simple, but almost.)

Let’s goooo! 🏃‍♂️💨

---

1. Install NextAuth.js 📦

First, let’s install the magic. Open up your terminal and run:

npm install next-auth

Your project is now officially NextAuth-ified! 🪄✨

---

2. Create a GitHub OAuth App 🐙

Head to GitHub Developer Settings and hit “New OAuth App”. Fill in the deets:

• Name: Anything cool, like "SuperApp" 🦸‍♂️
• Homepage URL: http://localhost:3000 (for local dev)
• Callback URL: http://localhost:3000/api/auth/callback/github (this is where GitHub will send users after they log in)

Boom! 💥 GitHub will give you a Client ID and a Client Secret (Top-secret stuff! 🤫).

---

3. Configure NextAuth.js Like a Pro 🖥️

Now, let’s connect your GitHub app to Next.js. Create a file called [...nextauth].js in pages/api/auth (yeah, those brackets are totally normal):

mkdir -p pages/api/auth && touch pages/api/auth/[...nextauth].js

Then, in [...nextauth].js, set up your GitHub provider:

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});

Add the following secrets to your .env.local:

GITHUB_CLIENT_ID=your-client-id
GITHUB_CLIENT_SECRET=your-client-secret
NEXTAUTH_SECRET=shhh-super-secret

🤫 PRO TIP: Keep those secrets safe. Don’t go pushing them to GitHub!

---

4. Create the Login Button 🖱️ (Because Clicking Is Fun!)

What’s an app without a shiny "Sign In with GitHub" button? ✨

Here’s how you can add it:

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

export default function LoginButton() {
  const { data: session } = useSession();

  if (session) {
    return (
      <>
        <p>👋 Hi, {session.user.email}</p>
        <button onClick={() => signOut()}>Logout</button>
      </>
    );
  }
  return <button onClick={() => signIn("github")}>Sign in with GitHub</button>;
}

Now you’ve got a simple, user-friendly "Login" button ready to go. Click it. Click it now. 🖱️

---

5. Protect Your Pages Like a Bouncer at the Club 🕶️🎟️

Want to block unauthorized users from accessing certain pages? You can add some gatekeeping with getSession:

import { getSession } from "next-auth/react";

export default function Dashboard({ user }) {
  return <h1>Welcome, {user.name}! 🎉</h1>;
}

export async function getServerSideProps(context) {
  const session = await getSession(context);
  if (!session) {
    return {
      redirect: {
        destination: "/api/auth/signin",
        permanent: false,
      },
    };
  }
  return {
    props: { user: session.user },
  };
}

Now only logged-in peeps can access the dashboard. 🚪⛔

---

🔥 You're Done! 🚀

Run your app with:

npm run dev

Open http://localhost:3000, and watch the magic happen! 🪄 You’ll see a slick "Sign in with GitHub" button. Click it, authenticate, and access protected pages like a true VIP. 🎟️✨

---

TL;DR 📝

• Install NextAuth.js 📦
• Set up a GitHub OAuth App 🐙
• Configure NextAuth with GitHub in [...nextauth].js 🛠️
• Add a Login/Logout button 👈
• Protect your pages like a pro 🕶️

---

That’s it! You’re officially GitHub-authenticated, like a real tech wizard. 🧙‍♂️ Feel free to flex this on your dev friends (but not too hard, we don’t want to make them jealous). 😎

If you run into issues, let me know in the comments or open an issue on GitHub! or email me @beingshahidali@gmail.com

[beingshahidali]

New post