😲Auth with clerk and NextAuth.js (ok)

https://viblo.asia/p/cung-minh-tao-boilerplate-cho-du-an-nextjs-v12-phan-2-i18n-va-nextauthjs-zOQJwQYkVMP
https://viblo.asia/p/authentication-google-one-tap-nextjs-14-va-nestjs-aNj4vvAx46r
https://www.youtube.com/watch?v=n-fVrzaikBQ

Clerk

.env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZWxlY3RyaWMtZXdlLTEyLmNsZXJrLmFjY291bnRzLmRldiQ
CLERK_SECRET_KEY=sk_test_LuBQm3aL6TPFMa3NjvmXAdy9ZNE9rJRRDsp8zBSXv6
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

src\middleware.ts

import { authMiddleware } from "@clerk/nextjs";
// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
export default authMiddleware({
  publicRoutes: ['/', '/about']
});
export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

src\components\header.tsx

import { UserButton, auth } from '@clerk/nextjs';
import Link from 'next/link';
export default async function Header() {
  const { userId } = auth();
  return (
    <div className='bg-gray-600 text-neutral-100'>
      <div className='container mx-auto flex items-center justify-between py-4'>
        <Link href='/'>Home</Link>
        <div>
          {userId ? (
            <div className='flex gap-4 items-center'>
              <Link href='/dashboard'>Dashboard</Link>
              <UserButton afterSignOutUrl='/' />
            </div>
          ) : (
            <div className='flex gap-4 items-center'>
              <Link href='/sign-up'>Sign up</Link>
              <Link href='/sign-in'>Sign In</Link>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

src\app\page.tsx

export default function Home() {
  return (
    <div>
      <h1 className='font-bold text-center mt-10'>Home page</h1>
    </div>
  );
}

src\app\layout.tsx

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { ClerkProvider } from '@clerk/nextjs';
import Header from '@/components/header';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang='en'>
      <body className={inter.className}>
        <ClerkProvider>
          <Header />
          {children}
        </ClerkProvider>
      </body>
    </html>
  );
}

src\app\sign-up\[[...sign-up]]\page.tsx

import { SignUp } from '@clerk/nextjs';
export default function Page() {
  return (
    <div className='flex items-center justify-center flex-col gap-10'>
      <h1 className='text-4xl font-bold mt-20'>This is signup page</h1>
      <SignUp />
    </div>
  );
}

src\app\sign-in[[...sign-in]]\page.tsx

import { SignIn } from '@clerk/nextjs';
export default function Page() {
  return (
    <div className='flex items-center justify-center flex-col gap-10'>
      <h1 className='text-4xl font-bold mt-20'>This is signin page</h1>
      <SignIn />
    </div>
  );
}

src\app\dashboard\page.tsx

import { auth, currentUser } from '@clerk/nextjs';
export default async function DashboardPage() {
  const { userId } = auth();
  const user = await currentUser();
  if (!userId || !user) {
    return <div>You are not logged in</div>;
  }
  return (
    <div className='mt-10 text-start max-w-xl mx-auto bg-neutral-200 p-5 rounded'>
      <h1 className='text-4xl font-bold'>Welcome</h1>
      <ul className='list-none mt-10'>
        <li className='mb-2'>
          <span className='font-semibold'>First Name:</span> {user.firstName}
        </li>
        <li className='mb-2'>
          <span className='font-semibold'>Last Name:</span> {user.lastName}
        </li>
        <li className='mb-2'>
          <span className='font-semibold'>Email:</span>{' '}
          {user.emailAddresses[0].emailAddress}
        </li>
      </ul>
    </div>
  );
}

src\app\about\page.tsx

export default function AboutPage() {
  return <div>AboutPage</div>;
}

NextAuth.js

Previousnext.config.js Full (ok)NextGitHub GraphQL API documentation

Last updated 3 hours ago

Was this helpful?

https://viblo.asia/p/cung-minh-tao-boilerplate-cho-du-an-nextjs-v12-phan-2-i18n-va-nextauthjs-zOQJwQYkVMP https://viblo.asia/p/authentication-google-one-tap-nextjs-14-va-nestjs-aNj4vvAx46r https://www.youtube.com/watch?v=n-fVrzaikBQ

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZWxlY3RyaWMtZXdlLTEyLmNsZXJrLmFjY291bnRzLmRldiQ CLERK_SECRET_KEY=sk_test_LuBQm3aL6TPFMa3NjvmXAdy9ZNE9rJRRDsp8zBSXv6 NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

import { authMiddleware } from "@clerk/nextjs"; // This example protects all routes including api/trpc routes // Please edit this to allow other routes to be public as needed. // See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware export default authMiddleware({ publicRoutes: ['/', '/about'] }); export const config = { matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"], };

import { UserButton, auth } from '@clerk/nextjs'; import Link from 'next/link'; export default async function Header() { const { userId } = auth(); return ( <div className='bg-gray-600 text-neutral-100'> <div className='container mx-auto flex items-center justify-between py-4'> <Link href='/'>Home</Link> <div> {userId ? ( <div className='flex gap-4 items-center'> <Link href='/dashboard'>Dashboard</Link> <UserButton afterSignOutUrl='/' /> </div> ) : ( <div className='flex gap-4 items-center'> <Link href='/sign-up'>Sign up</Link> <Link href='/sign-in'>Sign In</Link> </div> )} </div> </div> </div> ); }

import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import './globals.css'; import { ClerkProvider } from '@clerk/nextjs'; import Header from '@/components/header'; const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang='en'> <body className={inter.className}> <ClerkProvider> <Header /> {children} </ClerkProvider> </body> </html> ); }

import { SignUp } from '@clerk/nextjs'; export default function Page() { return ( <div className='flex items-center justify-center flex-col gap-10'> <h1 className='text-4xl font-bold mt-20'>This is signup page</h1> <SignUp /> </div> ); }

import { SignIn } from '@clerk/nextjs'; export default function Page() { return ( <div className='flex items-center justify-center flex-col gap-10'> <h1 className='text-4xl font-bold mt-20'>This is signin page</h1> <SignIn /> </div> ); }

import { auth, currentUser } from '@clerk/nextjs'; export default async function DashboardPage() { const { userId } = auth(); const user = await currentUser(); if (!userId || !user) { return <div>You are not logged in</div>; } return ( <div className='mt-10 text-start max-w-xl mx-auto bg-neutral-200 p-5 rounded'> <h1 className='text-4xl font-bold'>Welcome</h1> <ul className='list-none mt-10'> <li className='mb-2'> <span className='font-semibold'>First Name:</span> {user.firstName} </li> <li className='mb-2'> <span className='font-semibold'>Last Name:</span> {user.lastName} </li> <li className='mb-2'> <span className='font-semibold'>Email:</span>{' '} {user.emailAddresses[0].emailAddress} </li> </ul> </div> ); }