GitHub & Google OAuth (NextAuth)

The GitHub & Google OAuth component provides a secure and standardized way to integrate GitHub & Google authentication into Nextjs applications using next-auth.

Official Docs, Auth.js Docs

Installation Guide

Run the following command:

npx servercn-cli@latest add oauth

Add the `SessionProvider` to the root of your app.

src/app/layout.tsx

import { SessionProvider } from "@/components/providers/session-provider";
 
export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  );
}

Usage Example

Signin Page

src/app/signin/page.tsx

import { GoogleAndGitHubSignin } from "@/components/auth/google-github-signin";
 
export default function Page() {
  return (
    <div
      className={
        "flex h-screen w-full items-center justify-center bg-neutral-950"
      }>
      <GoogleAndGitHubSignin />
    </div>
  );
}

Profile Page

src/app/profile/page.tsx

import { ProfileCard } from "@/components/auth/profile-card";
 
export default function Page() {
  return (
    <div className={"flex h-screen w-full items-center justify-center"}>
      <ProfileCard />
    </div>
  );
}