DEV Community: Hein Htoo

Integrating GitHub Authentication with NextAuth.js: A Step-by-Step Guide

Hein Htoo — Thu, 19 Sep 2024 01:59:38 +0000

I am going to share my experience about integrating GitHub authentication with NextAuth.js.

Previous Post: Implementing auth.js v5 with Prisma and Supabase in Next.js

My GitHub Repo for next-auth Repo

Step 1: Create an OAuth App on GitHub

Go to this link and create new OAuth App.

You can add home page URL as http://localhost:3000

Note. GitHub only provides single Authorization callback URL so we need to create two OAuth app, one for localhost and one for production.

Authorization callback URL should point to Next.js API routes where NextAuth.js handles authentication

http://localhost:3000/api/auth/callback/github

Copy the Client ID and Client Secret for environment variables.


![Secrets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpu1lim6jscv4748c9oo.png)

Step 2: Adding Environment variables

Create environment variables in .env.local by adding the following environment variables

AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret

Step 3: Configure NextAuth.js for GitHub

In previous post, we added auth.js like this

// auth.ts
import NextAuth from "next-auth"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { prisma } from "@/prisma"
export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [],
})

Now we are going to add GitHub provider

// auth.ts
import NextAuth from "next-auth"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { prisma } from "@/prisma"
import GitHubProvider from "next-auth/providers/github";

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    GitHubProvider({
      clientId: process.env.AUTH_GITHUB_ID ?? "",
      clientSecret: process.env.AUTH_GITHUB_SECRET ?? "",
    })
  ],
})

That's all the part of setting up.

Step 4: Login with GitHub

You can either login from http://localhost:3000/api/auth/signin or you can create your custom sign-in page.

If you want to customize the sign-in experience, you can create a custom sign-in page.

First, create a file at app/sign-in/page.tsx

import { signIn } from 'next-auth/react'

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

And that's all for setting up with GitHub integration in Auth.js

Happy Coding ^_^

Integrating LinkedIn Authentication with NextAuth.js: A Step-by-Step Guide

Hein Htoo — Wed, 18 Sep 2024 12:15:53 +0000

I am going to share my experience about integrating linkedin authentication with NextAuth.js.

Previous Post: Implementing auth.js v5 with Prisma and Supabase in Next.js

My GitHub Repo for next-auth Repo

Step 1: Create LinkedIn Application

To allow Next.js application to use LinkedIn as an authentication provider, first create an app inside LinkedIn Developer Portal

It is pretty straight forward but you will need to create LinkedIn Page

After that go to Auth section and configure your redirect URLs.

The redirect url should point to Next.js API routes where NextAuth.js handles authentication



http://localhost:3000/api/auth/callback/linkedin

Copy the Client ID and Client Secret for environment variables.

Step 2: Adding Environment variables

Create environment variables in .env.local by adding the following environment variables



AUTH_LINKEDIN_ID=your-linkedin-client-id
AUTH_LINKEDIN_SECRET=your-linkedin-client-secret

Step 3: Configure NextAuth.js for LinkedIn

In previous post, we added auth.js like this



// auth.ts
import NextAuth from "next-auth"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { prisma } from "@/prisma"
export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [],
})

Now we are going to add LinkedIn provider



// auth.ts
import NextAuth from "next-auth"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { prisma } from "@/prisma"
import LinkedInProvider from "next-auth/providers/linkedin";

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    LinkedInProvider({
      clientId: process.env.AUTH_LINKEDIN_ID ?? "",
      clientSecret: process.env.AUTH_LINKEDIN_SECRET ?? "",
    })
  ],
})

That's all the part of setting up.

Step 4: Login with LinkedIn

You can either login from http://localhost:3000/api/auth/signin or you can create your custom sign-in page.

If you want to customize the sign-in experience, you can create a custom sign-in page.

First, create a file at app/sign-in/page.tsx



import { signIn } from 'next-auth/react'

export default function SignIn() {
  return (
    <div>
      <h1>Sign In</h1>
      <button onClick={() => signIn('linkedin')}>Sign in with LinkedIn</button>
    </div>
  )
}

And that's all for setting up with LinkedIn integration in Auth.js

Happy Coding ^_^

Implementing auth.js v5 with Prisma and Supabase in Next.js

Hein Htoo — Tue, 17 Sep 2024 06:28:31 +0000

With the new version auth.js v5 on the way, I am going to share my knowledge about step-by-step integrating it with Prisma and Supabase in Next.js.

Version

"next-auth": "^5.0.0-beta.20"
"@prisma/client": "^5.19.1"
"@auth/prisma-adapter": "^2.4.2"
"prisma": "^5.19.1"

Setting up Prisma

Install Prisma npm install prisma --save-dev
Initialize prisma npx prisma init
This will creates a new prisma directory with a schema.prisma file and configures PostgresSQL as your database also creating .env file with DATABASE_URL

Initialize Supabase

Create organization in supabase (optional if you are individual developer)
Create database
Get connection string by clicking connect button.

Click ORMS and in Prisma, copy the .env.local into .env
Click prisma/schema.prisma and copy the code inside your prisma.

Note. Prisma doesn't work on .env.local and it only works with .env so make sure to change the correct .env file

Setting NextAuth

Install auth.js v5
Adding NEXTAUTH_SECRET in env file npx auth secret
Add auth.ts file under src folder

// auth.ts
import NextAuth from 'next-auth';
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [],
})

Add a route handler under app/api/auth/[...nextauth]/route.ts

// app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

Add a middleware to keep session alive.

// middleware.ts
export { auth as middleware } from "@/auth"

Add PrismaAdapter The Prisma Adapter in NextAuth.js is a tool that allows NextAuth to store and manage authentication data (such as user accounts, sessions, verification tokens, etc.) in a Prisma-managed database.

npm install @prisma/client @auth/prisma-adapter

To improve performance using Prisma ORM, we can set up the Prisma instance to ensure only one instance is created throughout the project and then import it from any file as needed. This approach avoids recreating instances of PrismaClient every time it is used.

// prisma.ts
import { PrismaClient } from "@prisma/client"
const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }
export const prisma = globalForPrisma.prisma || new PrismaClient()
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma

Add prisma Adapter in auth.ts

// auth.ts
import NextAuth from "next-auth"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { prisma } from "@/prisma"
export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [],
})

Define database tables for authentication by adding this in prisma/schema.prisma

// prisma/schema.prisma
model User {
  id            String          @id @default(cuid())
  firstName     String?
  lastName      String?
  email         String          @unique
  password      String? // Make sure this field exists in your schema
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
  // Optional for WebAuthn support
  Authenticator Authenticator[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
model Account {
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String?
  access_token      String?
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String?
  session_state     String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
  @@id([provider, providerAccountId])
}
model Session {
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
model VerificationToken {
  identifier String
  token      String
  expires    DateTime
  @@id([identifier, token])
}
// Optional for WebAuthn support
model Authenticator {
  credentialID         String  @unique
  userId               String
  providerAccountId    String
  credentialPublicKey  String
  counter              Int
  credentialDeviceType String
  credentialBackedUp   Boolean
  transports           String?
  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
  @@id([userId, credentialID])
}

Perform migration

In prisma, migrations need to perform except MongoDB.

A migration in the context of databases refers to the process of modifying the database schema in a controlled, versioned manner. This allows developers to make changes to the database structure (such as adding or removing tables, changing columns, or creating relationships) while keeping track of the changes. Migrations help ensure consistency across environments (like development, testing, and production) and make it easier to manage schema changes over time.

And in order to create SQL migration file,
npx prisma migrate dev

Note: Migration need to perform only when the schema changes

This will take a while if we are using Supabase URL and will prompt to ask migration name and after finished running this command, all the changes in schema will be updated in supabase and also creating migrations folder inside prisma/migrations

Note: In order to sync the migrations with supabase, don’t delete migrations folder.

npx prisma migrate dev will also generate the Prisma client so the developer who is using this command may not need to run npx prisma generate.

But developers who pull from git will need to run npx prisma generate first to generate Prisma client.

Setting SessionProvider

We need to set session provider so that the client can use useSession hook.

Note: Need to add SessionProvider for all parent layout

// app/layout.tsx
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { SessionProvider } from "next-auth/react";
import { auth } from "@/auth";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const session = await auth();

  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <SessionProvider session={session}>{children}</SessionProvider>
      </body>
    </html>
  );
}

Calling session from server pages or from api

import { auth } from '@/auth';
const session = await auth();

Calling session from client components

"use client";
import { useSession } from 'next-auth/react';
const { data: session, status } = useSession();

Conclusion

By combining the power of Prisma, Auth.js v5 and Supabase (as database), we can easily manage authentication in a Next.js app with minimal configuration but I haven't added any providers yet. This is the initial setup for now and will share about others providers later.

My GitHub Repo for next-auth Repo

Integrating LinkedIn Authentication Link

Integrating GitHub Authentication Link

Happy Coding ^_^

Deploy React App to GitHub Pages using GitHub Actions

Hein Htoo — Wed, 24 Jul 2024 06:09:22 +0000

Deploy your React app seamlessly to GitHub Pages using GitHub Actions. With this setup, every push to your repository's main branch triggers an automated workflow that builds your app and publishes it to GitHub Pages. This ensures your latest updates are always live, without manual intervention. By leveraging gh-pages and a simple YAML configuration, you can maintain a smooth and efficient deployment pipeline directly from your GitHub repository.

Creating an app

Create react app if you don't have one by typing this command.

npx create-react-app my-app --template typescript
cd myapp

Add gh-pages library

gh-pages library is a simple tool for publishing files to a gh-pages branch on GitHub, which GitHub Pages uses to serve static websites.

npm install gh-pages --save-dev

Add home page in package.json

Specifying homepage tells React where the app will be hosted. It helps in generating the correct URLs for assets in the built files, ensuring everything works correctly when the app is deployed to GitHub Pages.

"homepage": "https://{github_username}.github.io/{repo_name}",

{
  "name": "myapp,
  "version": "0.1.0",
  "private": true,
  "homepage": "https://{github_username}.github.io/{repo_name}",
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.101",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^6.1.1",
    "tailwindcss": "^3.4.4"
  }
}

Deploying to GitHub Pages

Changing GitHub Repository Settings

Create public repository in order to deploy to GitHub Pages.
Push your code to the GitHub.

git add -A
git commit -m "init proj"
git remote add origin https://github.com/USERNAME/REPOSITORY_NAME.git
git push -u origin master

Allowing read and write permissions in settings -> Actions -> General. This is to allow write access to gh-pages Branch.

Create workflow yml file under .github/workflows/action.yml

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Deploy App to GitHub Pages

on:
  push:
    branches: ["main"]
  pull_request:
    branches: ["main"]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [20.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm ci
      - run: npm run build --if-present
      - run: npm test
      - name: Deploy with gh-pages
        run: |
          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
          npx gh-pages -d build -u "github-actions-bot <support+actions@github.com>"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

After that commit the changes and push to GitHub and let the action run.

git add .github
git commit -m "add workflow"
git push

You can see the actions running in Actions tab in GitHub.
After that push, go to settings -> pages Change Branch to gh-pages & /root and save.

This will create another action -> pages-build-deployment.

Once completed, https://{github_username}.github.io/{repo_name} can be accessed.

By leveraging GitHub Actions and gh-pages, you can maintain a robust and automated pipeline for deploying your React applications.