From 77e7e38422b66341681eff588efce9c3c5a1a13e Mon Sep 17 00:00:00 2001 From: Sahil Date: Fri, 17 Jan 2025 22:52:24 +0530 Subject: [PATCH] Example: with-clerk updated with latest version of clerk and nextjs --- examples/with-clerk/.env.local.example | 10 +- examples/with-clerk/.gitignore | 5 +- examples/with-clerk/README.md | 30 +-- examples/with-clerk/app/api-request.tsx | 90 ------- .../app/api/getAuthenticatedUserId/route.ts | 10 - examples/with-clerk/app/globals.css | 21 ++ examples/with-clerk/app/layout.tsx | 78 +++--- examples/with-clerk/app/page.tsx | 127 +-------- .../app/sign-in/[[...sign-in]]/page.tsx | 10 - .../app/sign-up/[[...sign-up]]/page.tsx | 10 - .../with-clerk/app/user/[[...index]]/page.tsx | 10 - examples/with-clerk/middleware.ts | 13 +- examples/with-clerk/next.config.js | 4 - examples/with-clerk/next.config.ts | 7 + examples/with-clerk/package.json | 28 +- examples/with-clerk/postcss.config.mjs | 8 + examples/with-clerk/public/clerk.svg | 26 -- examples/with-clerk/public/file.svg | 1 + examples/with-clerk/public/globe.svg | 1 + .../with-clerk/public/icons/arrow-right.svg | 4 - examples/with-clerk/public/icons/download.svg | 5 - .../with-clerk/public/icons/external-link.svg | 5 - examples/with-clerk/public/icons/layout.svg | 5 - examples/with-clerk/public/icons/server.svg | 6 - examples/with-clerk/public/icons/settings.svg | 4 - .../with-clerk/public/icons/user-plus.svg | 6 - examples/with-clerk/public/logo.svg | 3 - examples/with-clerk/public/next.svg | 1 + examples/with-clerk/public/nextjs.svg | 13 - examples/with-clerk/public/vercel.svg | 1 + examples/with-clerk/public/window.svg | 1 + examples/with-clerk/styles/Auth.module.css | 7 - examples/with-clerk/styles/Header.module.css | 33 --- examples/with-clerk/styles/Home.module.css | 253 ------------------ examples/with-clerk/styles/User.module.css | 5 - examples/with-clerk/styles/globals.css | 22 -- examples/with-clerk/styles/prism.css | 144 ---------- examples/with-clerk/tailwind.config.ts | 18 ++ examples/with-clerk/tsconfig.json | 5 +- 39 files changed, 147 insertions(+), 883 deletions(-) delete mode 100644 examples/with-clerk/app/api-request.tsx delete mode 100644 examples/with-clerk/app/api/getAuthenticatedUserId/route.ts create mode 100644 examples/with-clerk/app/globals.css delete mode 100644 examples/with-clerk/app/sign-in/[[...sign-in]]/page.tsx delete mode 100644 examples/with-clerk/app/sign-up/[[...sign-up]]/page.tsx delete mode 100644 examples/with-clerk/app/user/[[...index]]/page.tsx delete mode 100644 examples/with-clerk/next.config.js create mode 100644 examples/with-clerk/next.config.ts create mode 100644 examples/with-clerk/postcss.config.mjs delete mode 100644 examples/with-clerk/public/clerk.svg create mode 100644 examples/with-clerk/public/file.svg create mode 100644 examples/with-clerk/public/globe.svg delete mode 100644 examples/with-clerk/public/icons/arrow-right.svg delete mode 100644 examples/with-clerk/public/icons/download.svg delete mode 100644 examples/with-clerk/public/icons/external-link.svg delete mode 100644 examples/with-clerk/public/icons/layout.svg delete mode 100644 examples/with-clerk/public/icons/server.svg delete mode 100644 examples/with-clerk/public/icons/settings.svg delete mode 100644 examples/with-clerk/public/icons/user-plus.svg delete mode 100644 examples/with-clerk/public/logo.svg create mode 100644 examples/with-clerk/public/next.svg delete mode 100644 examples/with-clerk/public/nextjs.svg create mode 100644 examples/with-clerk/public/vercel.svg create mode 100644 examples/with-clerk/public/window.svg delete mode 100644 examples/with-clerk/styles/Auth.module.css delete mode 100644 examples/with-clerk/styles/Header.module.css delete mode 100644 examples/with-clerk/styles/Home.module.css delete mode 100644 examples/with-clerk/styles/User.module.css delete mode 100644 examples/with-clerk/styles/globals.css delete mode 100644 examples/with-clerk/styles/prism.css create mode 100644 examples/with-clerk/tailwind.config.ts diff --git a/examples/with-clerk/.env.local.example b/examples/with-clerk/.env.local.example index 37e33a87f4e8d..20a0116201e62 100644 --- a/examples/with-clerk/.env.local.example +++ b/examples/with-clerk/.env.local.example @@ -1,7 +1,5 @@ -NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key -CLERK_SECRET_KEY=your_clerk_secret_key +# Rename it to .env.local when implementing with clerk secret key + +NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY +CLERK_SECRET_KEY=YOUR_SECRET_KEY -NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in -NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up -NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/ -NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/ \ No newline at end of file diff --git a/examples/with-clerk/.gitignore b/examples/with-clerk/.gitignore index 8777267507c0e..5ef6a52078020 100644 --- a/examples/with-clerk/.gitignore +++ b/examples/with-clerk/.gitignore @@ -28,9 +28,10 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +.pnpm-debug.log* -# local env files -.env*.local +# env files (can opt-in for committing if needed) +.env* # vercel .vercel diff --git a/examples/with-clerk/README.md b/examples/with-clerk/README.md index 767b2d3713191..6cc03e83f75af 100644 --- a/examples/with-clerk/README.md +++ b/examples/with-clerk/README.md @@ -1,20 +1,16 @@ -# Clerk and Next.js Example +# Clerk & Nextjs Example -This example shows how to use [Clerk](https://www.clerk.dev/?utm_source=github&utm_medium=nextjs-examples&utm_campaign=nextjs) with Next.js. The example features adding sign up, sign in, profile management, and an authenticated API route to your Next.js application. - -## Demo - -A hosted demo of this example is available at [clerk-app-router.clerkpreview.com](https://clerk-app-router.clerkpreview.com/). +This example demonstrates how to set up Clerk authentication in a Next.js application. ## Deploy your own Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-clerk) -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-clerk&integration-ids=oac_7uYNbc9CdDAZmNqbt3LEkO3a) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-clerk&project-name=with-clerk&repository-name=with-clerk) ## How to use -Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), [pnpm](https://pnpm.io), or [Bun](https://bun.sh/docs/cli/bunx) to bootstrap the example: ```bash npx create-next-app --example with-clerk with-clerk-app @@ -28,18 +24,8 @@ yarn create next-app --example with-clerk with-clerk-app pnpm create next-app --example with-clerk with-clerk-app ``` -To run the example locally you need to: - -1. Sign up at [Clerk.dev](https://www.clerk.dev/?utm_source=github&utm_medium=starter_repos&utm_campaign=nextjs_starter). -2. Go to [Clerk's dashboard](https://dashboard.clerk.dev/?utm_source=github&utm_medium=starter_repos&utm_campaign=nextjs_starter) and create an application. -3. Set the required Clerk environment variables from your Clerk project as shown at [the example env file](./.env.local.example). -4. `yarn` to install the required dependencies. -5. `yarn dev` to launch the development server. - -## Learn More - -To learn more about Clerk.dev and Next.js, take a look at the following resources: +```bash +bunx create-next-app --example with-clerk with-clerk-app +``` -- [Quick start](https://docs.clerk.dev/get-started/nextjs) -- [Clerk.dev Documentation](https://docs.clerk.dev/) - learn about Clerk.dev features and API. -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/app/building-your-application/deploying)). diff --git a/examples/with-clerk/app/api-request.tsx b/examples/with-clerk/app/api-request.tsx deleted file mode 100644 index a904b2ee471cf..0000000000000 --- a/examples/with-clerk/app/api-request.tsx +++ /dev/null @@ -1,90 +0,0 @@ -"use client"; - -import { SignedIn, SignedOut } from "@clerk/nextjs"; -import { useEffect, useState } from "react"; -import styles from "../styles/Home.module.css"; -import "../styles/prism.css"; - -declare global { - interface Window { - Prism: any; - } -} - -const apiSample = `import { auth } from "@clerk/nextjs"; -import { NextResponse } from "next/server"; - -export async function GET(request: Request) { - const { userId, sessionId } = auth() - if(!sessionId) { - return NextResponse.json({ id: null }, { status: 401 }) - } - return NextResponse.json({ id: userId }, { status: 200 }) -}`; - -export const APIRequest = () => { - useEffect(() => { - if (window.Prism) { - window.Prism.highlightAll(); - } - }); - - const [response, setResponse] = useState("// Click above to run the request"); - - const makeRequest = async () => { - setResponse("// Loading..."); - - try { - const res = await fetch("/api/getAuthenticatedUserId"); - const body = await res.json(); - setResponse(JSON.stringify(body, null, " ")); - } catch (e) { - setResponse( - "// There was an error with the request. Please contact support@clerk.dev", - ); - } - }; - - return ( -
-

API request example

-
- -
-

- Response - - - You are signed in, so the request will return your user ID - - - You are signed out, so the request will return null - - -

- 
-        {response}
-
-

app/api/getAuthenticatedUserId/route.ts

- 
-        {apiSample}
-
-
- ); -}; diff --git a/examples/with-clerk/app/api/getAuthenticatedUserId/route.ts b/examples/with-clerk/app/api/getAuthenticatedUserId/route.ts deleted file mode 100644 index d3c57bf16a0be..0000000000000 --- a/examples/with-clerk/app/api/getAuthenticatedUserId/route.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { auth } from "@clerk/nextjs"; -import { NextResponse } from "next/server"; - -export async function GET(request: Request) { - const { userId, sessionId } = auth(); - if (!sessionId) { - return NextResponse.json({ id: null }, { status: 401 }); - } - return NextResponse.json({ id: userId }, { status: 200 }); -} diff --git a/examples/with-clerk/app/globals.css b/examples/with-clerk/app/globals.css new file mode 100644 index 0000000000000..6b717ad346d3d --- /dev/null +++ b/examples/with-clerk/app/globals.css @@ -0,0 +1,21 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --background: #ffffff; + --foreground: #171717; +} + +@media (prefers-color-scheme: dark) { + :root { + --background: #0a0a0a; + --foreground: #ededed; + } +} + +body { + color: var(--foreground); + background: var(--background); + font-family: Arial, Helvetica, sans-serif; +} diff --git a/examples/with-clerk/app/layout.tsx b/examples/with-clerk/app/layout.tsx index 151e165454080..e91945b11f8dc 100644 --- a/examples/with-clerk/app/layout.tsx +++ b/examples/with-clerk/app/layout.tsx @@ -1,53 +1,51 @@ -import "../styles/globals.css"; -import { ClerkProvider, SignedIn, SignedOut, UserButton } from "@clerk/nextjs"; -import { Inter } from "next/font/google"; -import Image from "next/image"; -import Script from "next/script"; -import styles from "../styles/Header.module.css"; -import Link from "next/link"; import type { Metadata } from "next"; +import { Geist, Geist_Mono } from "next/font/google"; +import "./globals.css"; +import { + ClerkProvider, + SignInButton, + SignedIn, + SignedOut, + UserButton, +} from "@clerk/nextjs"; -const inter = Inter({ subsets: ["latin"] }); +const geistSans = Geist({ + variable: "--font-geist-sans", + subsets: ["latin"], +}); + +const geistMono = Geist_Mono({ + variable: "--font-geist-mono", + subsets: ["latin"], +}); export const metadata: Metadata = { - title: "Clerk with App Router", - description: "Power your Next.js application with Clerk ", + title: "Create Next App", + description: "Generated by create next app", }; -const Header = () => ( -
-
- - Logo - Your application - -
-
- - Sign in - - - - -
-
-); - export default function RootLayout({ children, -}: { +}: Readonly<{ children: React.ReactNode; -}) { +}>) { return ( - - - -
-
{children}
+ + + +
+ + + + + + +
+ {children} - -