├── .env ├── .gitignore ├── README.md ├── app ├── components │ └── Header.jsx ├── dashboard │ └── page.jsx ├── favicon.ico ├── globals.css ├── layout.jsx ├── page.jsx ├── profile │ └── page.jsx ├── register │ └── page.jsx ├── sign-in │ └── [[...sign-in]] │ │ └── page.jsx └── sign-up │ └── [[...sign-up]] │ └── page.jsx ├── jsconfig.json ├── middleware.js ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── next.svg └── vercel.svg └── tailwind.config.js /.env: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in 2 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up 3 | NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard 4 | NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Clerk Authentication App 2 | 3 | This is an example of a Next.js app that uses [Clerk](https://clerk.com) for authentication and user management. This project goes along with my [YouTube Tutorial](). 4 | 5 | ## Usage 6 | 7 | Go to your https://clerk.com dashboard and click on `Developer->API Keys` to copy your keys. Create a file named `.env.local` and add the following: 8 | 9 | ``` 10 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR KEY 11 | CLERK_SECRET_KEY=YOUR KEY 12 | ``` 13 | 14 | 15 | Install the dependencies: 16 | 17 | ```bash 18 | npm install 19 | ``` 20 | 21 | Run the development server: 22 | 23 | ```bash 24 | npm run dev 25 | ``` 26 | 27 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 28 | 29 | -------------------------------------------------------------------------------- /app/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | import { UserButton, auth } from '@clerk/nextjs'; 3 | 4 | const Header = async ({ username }) => { 5 | const { userId } = auth(); 6 | 7 | return ( 8 | 43 | ); 44 | }; 45 | 46 | export default Header; 47 | -------------------------------------------------------------------------------- /app/dashboard/page.jsx: -------------------------------------------------------------------------------- 1 | const Dashboard = () => { 2 | return ( 3 | <> 4 |
Welcome to the dashboard!
6 | > 7 | ); 8 | }; 9 | 10 | export default Dashboard; 11 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/clerk-app/8b76184518c4d67220274b21b11fe386a1094567/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /app/layout.jsx: -------------------------------------------------------------------------------- 1 | import './globals.css'; 2 | import { Inter } from 'next/font/google'; 3 | import { ClerkProvider } from '@clerk/nextjs'; 4 | import { light } from '@clerk/themes'; 5 | import Header from './components/Header'; 6 | 7 | const inter = Inter({ subsets: ['latin'] }); 8 | 9 | export const metadata = { 10 | title: 'Clerk App', 11 | description: 'Example Clerk App', 12 | }; 13 | 14 | export default function RootLayout({ children }) { 15 | return ( 16 |6 | This is the demo site for Traversy Media's Next.js & Clerk tutorial. Go 7 | ahead and sign up or sign in! 8 |
9 | > 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /app/profile/page.jsx: -------------------------------------------------------------------------------- 1 | import { UserProfile } from '@clerk/nextjs'; 2 | 3 | const ProfilePage = () => { 4 | return ( 5 | <> 6 |