├── .eslintrc.json
├── app
    ├── favicon.ico
    ├── fonts
    │   ├── SF-Pro-Display-Medium.otf
    │   └── index.ts
    ├── providers.tsx
    ├── auth
    │   └── page.tsx
    ├── layout.tsx
    ├── opengraph-image.tsx
    ├── globals.css
    └── page.tsx
├── next.config.mjs
├── postcss.config.js
├── components
    ├── layout
    │   ├── nav.tsx
    │   ├── navbar.tsx
    │   └── user-dropdown.tsx
    └── ui
    │   ├── skeleton.tsx
    │   ├── label.tsx
    │   ├── input.tsx
    │   ├── popover.tsx
    │   ├── button.tsx
    │   └── card.tsx
├── renovate.json
├── middleware.ts
├── components.json
├── lib
    ├── hooks
    │   ├── use-scroll.ts
    │   ├── use-local-storage.ts
    │   ├── use-intersection-observer.ts
    │   └── use-media-query.ts
    └── utils.ts
├── .gitignore
├── public
    ├── vercel.svg
    └── next.svg
├── tsconfig.json
├── package.json
├── LICENSE
├── tailwind.config.ts
└── README.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/descope-sample-apps/nextjs-demo-app-router/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/app/fonts/SF-Pro-Display-Medium.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/descope-sample-apps/nextjs-demo-app-router/HEAD/app/fonts/SF-Pro-Display-Medium.otf


--------------------------------------------------------------------------------
/components/layout/nav.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | 
3 | import Navbar from "./navbar";
4 | 
5 | export default function Nav() {
6 |   return <Navbar />;
7 | }
8 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 |   "extends": [
4 |     "local>descope-sample-apps/renovate-config"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | // src/middleware.ts
 2 | import { authMiddleware } from '@descope/nextjs-sdk/server'
 3 | 
 4 | export default authMiddleware({
 5 |     redirectUrl: '/auth',
 6 | 	publicRoutes: ['/', '/auth']
 7 | })
 8 | 
 9 | export const config = {
10 | 	matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)']
11 | }


--------------------------------------------------------------------------------
/app/fonts/index.ts:
--------------------------------------------------------------------------------
 1 | import localFont from "next/font/local";
 2 | import { Inter } from "next/font/google";
 3 | 
 4 | export const sfPro = localFont({
 5 |   src: "./SF-Pro-Display-Medium.otf",
 6 |   variable: "--font-sf",
 7 | });
 8 | 
 9 | export const inter = Inter({
10 |   variable: "--font-inter",
11 |   subsets: ["latin"],
12 | });
13 | 


--------------------------------------------------------------------------------
/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }: React.HTMLAttributes<HTMLDivElement>) {
 7 |   return (
 8 |     <div
 9 |       className={cn("animate-pulse rounded-md bg-muted", className)}
10 |       {...props}
11 |     />
12 |   )
13 | }
14 | 
15 | export { Skeleton }
16 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/lib/hooks/use-scroll.ts:
--------------------------------------------------------------------------------
 1 | import { useCallback, useEffect, useState } from "react";
 2 | 
 3 | export default function useScroll(threshold: number) {
 4 |   const [scrolled, setScrolled] = useState(false);
 5 | 
 6 |   const onScroll = useCallback(() => {
 7 |     setScrolled(window.pageYOffset > threshold);
 8 |   }, [threshold]);
 9 | 
10 |   useEffect(() => {
11 |     window.addEventListener("scroll", onScroll);
12 |     return () => window.removeEventListener("scroll", onScroll);
13 |   }, [onScroll]);
14 | 
15 |   return scrolled;
16 | }
17 | 


--------------------------------------------------------------------------------
/app/providers.tsx:
--------------------------------------------------------------------------------
 1 | // providers.tsx
 2 | import React from 'react';
 3 | import { AuthProvider } from "@descope/nextjs-sdk";
 4 | 
 5 | const Providers: React.FC<{ children: JSX.Element | undefined }> = ({ children }) => {
 6 |   if (process.env.NEXT_PUBLIC_DESCOPE_PROJECT_ID === undefined) {
 7 |     throw new Error("NEXT_PUBLIC_DESCOPE_PROJECT_ID is not defined");
 8 |   }
 9 |   
10 |   return (
11 |     <AuthProvider projectId={process.env.NEXT_PUBLIC_DESCOPE_PROJECT_ID}>
12 |       {children}
13 |     </AuthProvider>
14 |   );
15 | };
16 | 
17 | export default Providers;
18 | 


--------------------------------------------------------------------------------
/.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 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | .env
31 | 
32 | # vercel
33 | .vercel
34 | 
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | 
39 | # misc
40 | .vscode
41 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/app/auth/page.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { Descope } from '@descope/nextjs-sdk';
 4 | const Page = () => {
 5 | 	return (
 6 |         <div className="flex flex-col items-center p-24 rounded-md">
 7 |             <Descope
 8 |                 flowId="sign-up-or-in"
 9 |                 onSuccess={(e) => {
10 |                     console.log('Logged in!')
11 |                     window.location.href = "/"
12 |                 }}
13 |                 onError={(e) => console.log('Could not logged in!')}
14 |                 // redirectAfterSuccess="/"
15 |                 // redirectAfterError="/error-page"
16 |             />
17 |         </div>
18 | 	);
19 | };
20 | 
21 | export default Page;


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/lib/hooks/use-local-storage.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | const useLocalStorage = <T>(
 4 |   key: string,
 5 |   initialValue: T,
 6 | ): [T, (value: T) => void] => {
 7 |   const [storedValue, setStoredValue] = useState(initialValue);
 8 | 
 9 |   useEffect(() => {
10 |     // Retrieve from localStorage
11 |     const item = window.localStorage.getItem(key);
12 |     if (item) {
13 |       setStoredValue(JSON.parse(item));
14 |     }
15 |   }, [key]);
16 | 
17 |   const setValue = (value: T) => {
18 |     // Save state
19 |     setStoredValue(value);
20 |     // Save to localStorage
21 |     window.localStorage.setItem(key, JSON.stringify(value));
22 |   };
23 |   return [storedValue, setValue];
24 | };
25 | 
26 | export default useLocalStorage;
27 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import "./globals.css";
 3 | import Nav from "@/components/layout/nav";
 4 | import cx from "classnames";
 5 | import { sfPro, inter } from "./fonts";
 6 | import { Suspense } from "react";
 7 | import Providers from "./providers";
 8 | 
 9 | export const metadata: Metadata = {
10 |   title: "Create Next App",
11 |   description: "Generated by create next app",
12 | };
13 | 
14 | export default function RootLayout({
15 |   children,
16 | }: Readonly<{
17 |   children: React.ReactNode;
18 | }>) {
19 |   return (
20 |    <Providers>
21 |       <html lang="en">
22 |         <body className={cx(sfPro.variable, inter.variable)}>
23 |           <div className="fixed h-screen w-full" />
24 |           <Suspense fallback="...">
25 |             <Nav />
26 |           </Suspense>
27 |           <main className="flex min-h-screen w-full flex-col items-center justify-center py-32">
28 |           {children}
29 |         </main>
30 |         </body>
31 |       </html>
32 |    </Providers>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@descope/nextjs-sdk": "^0.0.5-alpha.1",
13 |     "@radix-ui/react-label": "^2.0.2",
14 |     "@radix-ui/react-popover": "^1.0.7",
15 |     "@radix-ui/react-slot": "^1.0.2",
16 |     "class-variance-authority": "^0.7.0",
17 |     "classnames": "^2.5.1",
18 |     "clsx": "^2.1.0",
19 |     "lucide-react": "^0.359.0",
20 |     "ms": "^2.1.3",
21 |     "next": "15.4.10",
22 |     "react": "^18",
23 |     "react-dom": "^18",
24 |     "tailwind-merge": "^2.2.2",
25 |     "tailwindcss-animate": "^1.0.7"
26 |   },
27 |   "devDependencies": {
28 |     "@types/ms": "^0.7.34",
29 |     "@types/node": "^22.0.0",
30 |     "@types/react": "^18",
31 |     "@types/react-dom": "^18",
32 |     "autoprefixer": "^10.4.18",
33 |     "eslint": "^9.0.0",
34 |     "eslint-config-next": "15.5.9",
35 |     "postcss": "^8.4.35",
36 |     "tailwindcss": "^3.4.1",
37 |     "typescript": "^5"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Descope Sample Apps
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/lib/hooks/use-intersection-observer.ts:
--------------------------------------------------------------------------------
 1 | import { RefObject, useEffect, useState } from "react";
 2 | 
 3 | interface Args extends IntersectionObserverInit {
 4 |   freezeOnceVisible?: boolean;
 5 | }
 6 | 
 7 | function useIntersectionObserver(
 8 |   elementRef: RefObject<Element>,
 9 |   {
10 |     threshold = 0,
11 |     root = null,
12 |     rootMargin = "0%",
13 |     freezeOnceVisible = false,
14 |   }: Args,
15 | ): IntersectionObserverEntry | undefined {
16 |   const [entry, setEntry] = useState<IntersectionObserverEntry>();
17 | 
18 |   const frozen = entry?.isIntersecting && freezeOnceVisible;
19 | 
20 |   const updateEntry = ([entry]: IntersectionObserverEntry[]): void => {
21 |     setEntry(entry);
22 |   };
23 | 
24 |   useEffect(() => {
25 |     const node = elementRef?.current; // DOM Ref
26 |     const hasIOSupport = !!window.IntersectionObserver;
27 | 
28 |     if (!hasIOSupport || frozen || !node) return;
29 | 
30 |     const observerParams = { threshold, root, rootMargin };
31 |     const observer = new IntersectionObserver(updateEntry, observerParams);
32 | 
33 |     observer.observe(node);
34 | 
35 |     return () => observer.disconnect();
36 | 
37 |     // eslint-disable-next-line react-hooks/exhaustive-deps
38 |   }, [threshold, root, rootMargin, frozen]);
39 | 
40 |   return entry;
41 | }
42 | 
43 | export default useIntersectionObserver;
44 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/lib/hooks/use-media-query.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | export default function useMediaQuery() {
 4 |   const [device, setDevice] = useState<"mobile" | "tablet" | "desktop" | null>(
 5 |     null,
 6 |   );
 7 |   const [dimensions, setDimensions] = useState<{
 8 |     width: number;
 9 |     height: number;
10 |   } | null>(null);
11 | 
12 |   useEffect(() => {
13 |     const checkDevice = () => {
14 |       if (window.matchMedia("(max-width: 640px)").matches) {
15 |         setDevice("mobile");
16 |       } else if (
17 |         window.matchMedia("(min-width: 641px) and (max-width: 1024px)").matches
18 |       ) {
19 |         setDevice("tablet");
20 |       } else {
21 |         setDevice("desktop");
22 |       }
23 |       setDimensions({ width: window.innerWidth, height: window.innerHeight });
24 |     };
25 | 
26 |     // Initial detection
27 |     checkDevice();
28 | 
29 |     // Listener for windows resize
30 |     window.addEventListener("resize", checkDevice);
31 | 
32 |     // Cleanup listener
33 |     return () => {
34 |       window.removeEventListener("resize", checkDevice);
35 |     };
36 |   }, []);
37 | 
38 |   return {
39 |     device,
40 |     width: dimensions?.width,
41 |     height: dimensions?.height,
42 |     isMobile: device === "mobile",
43 |     isTablet: device === "tablet",
44 |     isDesktop: device === "desktop",
45 |   };
46 | }
47 | 


--------------------------------------------------------------------------------
/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Popover = PopoverPrimitive.Root
 9 | 
10 | const PopoverTrigger = PopoverPrimitive.Trigger
11 | 
12 | const PopoverContent = React.forwardRef<
13 |   React.ElementRef<typeof PopoverPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <PopoverPrimitive.Portal>
17 |     <PopoverPrimitive.Content
18 |       ref={ref}
19 |       align={align}
20 |       sideOffset={sideOffset}
21 |       className={cn(
22 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   </PopoverPrimitive.Portal>
28 | ))
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
30 | 
31 | export { Popover, PopoverTrigger, PopoverContent }
32 | 


--------------------------------------------------------------------------------
/app/opengraph-image.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @next/next/no-img-element */
 2 | import { ImageResponse } from "next/og";
 3 | 
 4 | export const runtime = "edge";
 5 | export const alt = "Descope - Starter template for your Next.js project";
 6 | export const contentType = "image/png";
 7 | 
 8 | export default async function OG() {
 9 |   const sfPro = await fetch(
10 |     new URL("./fonts/SF-Pro-Display-Medium.otf", import.meta.url),
11 |   ).then((res) => res.arrayBuffer());
12 | 
13 |   return new ImageResponse(
14 |     (
15 |       <div
16 |         style={{
17 |           height: "100%",
18 |           width: "100%",
19 |           display: "flex",
20 |           flexDirection: "column",
21 |           alignItems: "center",
22 |           justifyContent: "center",
23 |           backgroundColor: "white",
24 |           backgroundImage:
25 |             "linear-gradient(to bottom right, #E0E7FF 25%, #ffffff 50%, #CFFAFE 75%)",
26 |         }}
27 |       >
28 |         <img
29 |           src={`https://${process.env.VERCEL_URL || "descope.com"}/logo.png`}
30 |           alt="Descope Logo"
31 |           tw="w-20 h-20 mb-4 opacity-95"
32 |         />
33 |         <h1
34 |           style={{
35 |             fontSize: "100px",
36 |             fontFamily: "SF Pro",
37 |             background:
38 |               "linear-gradient(to bottom right, #000000 21.66%, #78716c 86.47%)",
39 |             backgroundClip: "text",
40 |             color: "transparent",
41 |             lineHeight: "5rem",
42 |             letterSpacing: "-0.02em",
43 |           }}
44 |         >
45 |           Descope
46 |         </h1>
47 |       </div>
48 |     ),
49 |     {
50 |       width: 1200,
51 |       height: 630,
52 |       fonts: [
53 |         {
54 |           name: "SF Pro",
55 |           data: sfPro,
56 |         },
57 |       ],
58 |     },
59 |   );
60 | }
61 | 


--------------------------------------------------------------------------------
/components/layout/navbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Image from "next/image";
 4 | import Link from "next/link";
 5 | import useScroll from "@/lib/hooks/use-scroll";
 6 | // import { useSignInModal } from "./sign-in-modal";
 7 | import UserDropdown from "./user-dropdown";
 8 | import { useSession } from "@descope/nextjs-sdk/client";
 9 | 
10 | export default function NavBar() {
11 |   const scrolled = useScroll(50);
12 |   const { isSessionLoading, sessionToken, isAuthenticated } = useSession();
13 | 
14 |   return (
15 |     <>
16 |       <div
17 |         className={`fixed top-0 w-full flex justify-center ${
18 |           scrolled
19 |             ? "border-b border-gray-200 bg-white/50 backdrop-blur-xl"
20 |             : "bg-white/0"
21 |         } z-30 transition-all`}
22 |       >
23 |         <div className="mx-5 flex h-16 max-w-screen-xl items-center justify-between w-full">
24 |           <Link href="/" className="flex items-center font-display text-2xl">
25 |             {/* <Image
26 |               src="/logo.png"
27 |               alt="Descope logo"
28 |               width="30"
29 |               height="30"
30 |               className="mr-2 rounded-sm"
31 |             ></Image> */}
32 |             <p>Descope</p>
33 |           </Link>
34 |           {isSessionLoading ? null : (
35 |             <div>
36 |             {isAuthenticated ? (
37 |               <UserDropdown sessionToken={sessionToken} />
38 |             ) : (
39 |               <button
40 |                 className="rounded-full border border-black bg-black p-1.5 px-4 text-sm text-white transition-all hover:bg-white hover:text-black"
41 |                 onClick={() => {
42 |                   window.location.href = "/auth"
43 |                 }}
44 |               >
45 |                 Sign In
46 |               </button>
47 |             )}
48 |           </div>
49 |           )}
50 |         </div>
51 |       </div>
52 |     </>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 |  
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 222.2 84% 4.9%;
 9 | 
10 |     --card: 0 0% 100%;
11 |     --card-foreground: 222.2 84% 4.9%;
12 |  
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 222.2 84% 4.9%;
15 |  
16 |     --primary: 222.2 47.4% 11.2%;
17 |     --primary-foreground: 210 40% 98%;
18 |  
19 |     --secondary: 210 40% 96.1%;
20 |     --secondary-foreground: 222.2 47.4% 11.2%;
21 |  
22 |     --muted: 210 40% 96.1%;
23 |     --muted-foreground: 215.4 16.3% 46.9%;
24 |  
25 |     --accent: 210 40% 96.1%;
26 |     --accent-foreground: 222.2 47.4% 11.2%;
27 |  
28 |     --destructive: 0 84.2% 60.2%;
29 |     --destructive-foreground: 210 40% 98%;
30 | 
31 |     --border: 214.3 31.8% 91.4%;
32 |     --input: 214.3 31.8% 91.4%;
33 |     --ring: 222.2 84% 4.9%;
34 |  
35 |     --radius: 0.5rem;
36 |   }
37 |  
38 |   .dark {
39 |     --background: 222.2 84% 4.9%;
40 |     --foreground: 210 40% 98%;
41 |  
42 |     --card: 222.2 84% 4.9%;
43 |     --card-foreground: 210 40% 98%;
44 |  
45 |     --popover: 222.2 84% 4.9%;
46 |     --popover-foreground: 210 40% 98%;
47 |  
48 |     --primary: 210 40% 98%;
49 |     --primary-foreground: 222.2 47.4% 11.2%;
50 |  
51 |     --secondary: 217.2 32.6% 17.5%;
52 |     --secondary-foreground: 210 40% 98%;
53 |  
54 |     --muted: 217.2 32.6% 17.5%;
55 |     --muted-foreground: 215 20.2% 65.1%;
56 |  
57 |     --accent: 217.2 32.6% 17.5%;
58 |     --accent-foreground: 210 40% 98%;
59 |  
60 |     --destructive: 0 62.8% 30.6%;
61 |     --destructive-foreground: 210 40% 98%;
62 |  
63 |     --border: 217.2 32.6% 17.5%;
64 |     --input: 217.2 32.6% 17.5%;
65 |     --ring: 212.7 26.8% 83.9%;
66 |   }
67 | }
68 |  
69 | @layer base {
70 |   * {
71 |     @apply border-border;
72 |   }
73 |   body {
74 |     @apply bg-background text-foreground;
75 |   }
76 | }


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/components/ui/button";
 2 | import {
 3 |   Card,
 4 |   CardContent,
 5 |   CardDescription,
 6 |   CardFooter,
 7 |   CardHeader,
 8 |   CardTitle,
 9 | } from "@/components/ui/card"
10 | import Image from "next/image";
11 | 
12 | export default function Home() {
13 |   return (
14 |     <>
15 |     <div className="z-10 w-full max-w-xl px-5 xl:px-0">
16 |         <h1
17 |           className="bg-gradient-to-br from-black to-stone-500 bg-clip-text text-center font-display text-4xl font-bold tracking-[-0.02em] text-transparent drop-shadow-sm [text-wrap:balance] md:text-7xl md:leading-[5rem]"
18 |         >
19 |           Starter template for your Next project
20 |         </h1>
21 |         <p
22 |           className="mt-6 text-center text-gray-500 [text-wrap:balance] md:text-xl"
23 |         >
24 |           An opinionated collection of components, hooks, and utilities for your
25 |           Next.js project, including authentication with Descope
26 |         </p>
27 |         <div
28 |           className="mx-auto mt-6 flex animate-fade-up items-center justify-center space-x-5"
29 |         >
30 |           <a href = "/auth">
31 |             <Button className="mt-10">Get started</Button>
32 |           </a>
33 |         </div>
34 |       </div>
35 |       <div className="my-10 grid w-full max-w-screen-xl animate-fade-up grid-cols-1 gap-5 px-5 md:grid-cols-3 xl:px-0">
36 |         {Array.from(Array(6)).map((value, index) => (
37 |           <Card
38 |             key={index}
39 |           >
40 |             <CardHeader>
41 |               <CardTitle>Card Title</CardTitle>
42 |               <CardDescription>Card Description</CardDescription>
43 |             </CardHeader>
44 |             {/* <CardContent>
45 |               <p>Card Content</p>
46 |             </CardContent>
47 |             <CardFooter>
48 |               <p>Card Footer</p>
49 |             </CardFooter> */}
50 |           </Card>
51 |         ))}
52 |       </div>
53 |      
54 |     </>
55 |   );
56 | }
57 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { clsx, type ClassValue } from "clsx";
 2 | import { twMerge } from "tailwind-merge";
 3 | import ms from "ms";
 4 | 
 5 | export function cn(...inputs: ClassValue[]) {
 6 |   return twMerge(clsx(inputs));
 7 | }
 8 | 
 9 | export const timeAgo = (timestamp: Date, timeOnly?: boolean): string => {
10 |   if (!timestamp) return "never";
11 |   return `${ms(Date.now() - new Date(timestamp).getTime())}${
12 |     timeOnly ? "" : " ago"
13 |   }`;
14 | };
15 | 
16 | export async function fetcher<JSON = any>(
17 |   input: RequestInfo,
18 |   init?: RequestInit,
19 | ): Promise<JSON> {
20 |   const res = await fetch(input, init);
21 | 
22 |   if (!res.ok) {
23 |     const json = await res.json();
24 |     if (json.error) {
25 |       const error = new Error(json.error) as Error & {
26 |         status: number;
27 |       };
28 |       error.status = res.status;
29 |       throw error;
30 |     } else {
31 |       throw new Error("An unexpected error occurred");
32 |     }
33 |   }
34 | 
35 |   return res.json();
36 | }
37 | 
38 | export function nFormatter(num: number, digits?: number) {
39 |   if (!num) return "0";
40 |   const lookup = [
41 |     { value: 1, symbol: "" },
42 |     { value: 1e3, symbol: "K" },
43 |     { value: 1e6, symbol: "M" },
44 |     { value: 1e9, symbol: "G" },
45 |     { value: 1e12, symbol: "T" },
46 |     { value: 1e15, symbol: "P" },
47 |     { value: 1e18, symbol: "E" },
48 |   ];
49 |   const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
50 |   var item = lookup
51 |     .slice()
52 |     .reverse()
53 |     .find(function (item) {
54 |       return num >= item.value;
55 |     });
56 |   return item
57 |     ? (num / item.value).toFixed(digits || 1).replace(rx, "$1") + item.symbol
58 |     : "0";
59 | }
60 | 
61 | export function dFormatter(date: Date) {
62 |   return new Intl.DateTimeFormat("en-US", {
63 |     year: "numeric",
64 |     month: "short",
65 |     day: "numeric",
66 |   }).format(date);
67 | }
68 | 
69 | export function capitalize(str: string) {
70 |   if (!str || typeof str !== "string") return str;
71 |   return str.charAt(0).toUpperCase() + str.slice(1);
72 | }
73 | 
74 | export const truncate = (str: string, length: number) => {
75 |   if (!str || str.length <= length) return str;
76 |   return `${str.slice(0, length)}...`;
77 | };
78 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss"
 2 | 
 3 | const config = {
 4 |   darkMode: ["class"],
 5 |   content: [
 6 |     './pages/**/*.{ts,tsx}',
 7 |     './components/**/*.{ts,tsx}',
 8 |     './app/**/*.{ts,tsx}',
 9 |     './src/**/*.{ts,tsx}',
10 | 	],
11 |   prefix: "",
12 |   theme: {
13 |     container: {
14 |       center: true,
15 |       padding: "2rem",
16 |       screens: {
17 |         "2xl": "1400px",
18 |       },
19 |     },
20 |     extend: {
21 |       colors: {
22 |         border: "hsl(var(--border))",
23 |         input: "hsl(var(--input))",
24 |         ring: "hsl(var(--ring))",
25 |         background: "hsl(var(--background))",
26 |         foreground: "hsl(var(--foreground))",
27 |         primary: {
28 |           DEFAULT: "hsl(var(--primary))",
29 |           foreground: "hsl(var(--primary-foreground))",
30 |         },
31 |         secondary: {
32 |           DEFAULT: "hsl(var(--secondary))",
33 |           foreground: "hsl(var(--secondary-foreground))",
34 |         },
35 |         destructive: {
36 |           DEFAULT: "hsl(var(--destructive))",
37 |           foreground: "hsl(var(--destructive-foreground))",
38 |         },
39 |         muted: {
40 |           DEFAULT: "hsl(var(--muted))",
41 |           foreground: "hsl(var(--muted-foreground))",
42 |         },
43 |         accent: {
44 |           DEFAULT: "hsl(var(--accent))",
45 |           foreground: "hsl(var(--accent-foreground))",
46 |         },
47 |         popover: {
48 |           DEFAULT: "hsl(var(--popover))",
49 |           foreground: "hsl(var(--popover-foreground))",
50 |         },
51 |         card: {
52 |           DEFAULT: "hsl(var(--card))",
53 |           foreground: "hsl(var(--card-foreground))",
54 |         },
55 |       },
56 |       borderRadius: {
57 |         lg: "var(--radius)",
58 |         md: "calc(var(--radius) - 2px)",
59 |         sm: "calc(var(--radius) - 4px)",
60 |       },
61 |       keyframes: {
62 |         "accordion-down": {
63 |           from: { height: "0" },
64 |           to: { height: "var(--radix-accordion-content-height)" },
65 |         },
66 |         "accordion-up": {
67 |           from: { height: "var(--radix-accordion-content-height)" },
68 |           to: { height: "0" },
69 |         },
70 |       },
71 |       animation: {
72 |         "accordion-down": "accordion-down 0.2s ease-out",
73 |         "accordion-up": "accordion-up 0.2s ease-out",
74 |       },
75 |     },
76 |   },
77 |   plugins: [require("tailwindcss-animate")],
78 | } satisfies Config
79 | 
80 | export default config


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Redme Logo](https://github.com/descope-sample-apps/nextjs-demo-app-router/assets/46854522/6f95c078-c944-4b72-bced-92742fbf7ff3)
 2 | 
 3 | # Welcome to the Descope and NextJS App Router Template: Building Blocks Included
 4 | This is a sample consumer app built by Descope to showcase the Descope Flows functionality with NextJS. It also includes useful hooks, utilities, and components to get started.
 5 | 
 6 | 
 7 | ## One-click Deploy
 8 | 
 9 | You can deploy this template to Vercel with the button below:
10 | 
11 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdescope-sample-apps%2Fnextjs-demo-app-router&env=NEXT_PUBLIC_DESCOPE_PROJECT_ID)
12 | 
13 | 
14 | ## Technology Stack and Capabilities
15 | 
16 | ### Core Frameworks
17 | 
18 | - [Next.js](https://nextjs.org/): A React framework designed for building high-performance applications with an exceptional developer experience.
19 | - [Descope](https://descope.com): Use no-code workflows to easily add authentication, authorization, and identity management to any customer-facing app.
20 | 
21 | ### Deployment Platforms
22 | 
23 | - [Vercel](https://vercel.com/): Provides a seamless way to preview and deploy changes directly from git repositories.
24 | 
25 | ### User Interface (UI)
26 | 
27 | - [Tailwind CSS](https://tailwindcss.com/): A utility-first CSS framework that accelerates the process of UI development.
28 | - [Radix](https://www.radix-ui.com/): Offers foundational components like modals and popovers for enhancing user interfaces.
29 | - [Lucide](https://lucide.dev/): Offers a collection of simple and precise icons for web projects.
30 | - [`next/font`](https://nextjs.org/docs/basic-features/font-optimization): Enables custom font optimization, eliminating the need for external network requests, thereby boosting performance.
31 | - [`ImageResponse`](https://nextjs.org/docs/app/api-reference/functions/image-response): Allows for the dynamic generation of Open Graph images at the edge for improved sharing capabilities.
32 | 
33 | ### React Hooks and Utility Functions
34 | 
35 | - `useIntersectionObserver`: A React hook to detect when an element becomes visible or hidden in the viewport.
36 | - `useLocalStorage`: Enables the persistent storage of data within the browser's local storage.
37 | - `useScroll`: A React hook to monitor scroll events and positions within an application.
38 | - `nFormatter`: Simplifies the display of numbers by adding suffixes (e.g., `1.2k` for 1200).
39 | - `capitalize`: A utility function to capitalize the first letter of a string for improved readability.
40 | - `truncate`: Allows for the shortening of strings to a specific length, useful for creating concise text previews.
41 | - [`use-debounce`](https://www.npmjs.com/package/use-debounce): Debounces function calls or state updates, helping to optimize performance and reduce unnecessary processing.
42 | 
43 | ### Ensuring Code Quality
44 | 
45 | - [TypeScript](https://www.typescriptlang.org/): A static type-checking tool offering end-to-end type safety for robust development.
46 | - [Prettier](https://prettier.io/): An opinionated code formatter that standardizes code style across projects.
47 | - [ESLint](https://eslint.org/): A configurable linter tool tailored for Next.js and TypeScript projects, ensuring code quality and consistency.
48 | - 
49 | ## Set up
50 | In order to launch this app:
51 | 
52 | #### 1. Clone the repo 
53 | ```
54 | git clone git@github.com:descope-sample-apps/nextjs-demo-app-router.git
55 | ```
56 | 
57 | #### 2. Set up Descope environment variables in `.env` file
58 | ```
59 | NEXT_PUBLIC_DESCOPE_PROJECT_ID="YOUR PROJECT ID" // Required for Descope authentication
60 | ```
61 | _You can get your project-id [here](https://app.descope.com/settings/project)_.
62 | 
63 | #### 3. Install dependencies 
64 | ```
65 | npm i
66 | ```
67 | 
68 | #### 4. Start the app
69 | 
70 | Run this command to start the app:
71 | 
72 | ```
73 | npm run dev
74 | ```
75 | 
76 | #### 5. Open the app
77 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
78 | 
79 | 


--------------------------------------------------------------------------------
/components/layout/user-dropdown.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { useCallback, useState } from "react";
  4 | // import { signOut } from "next-auth/react";
  5 | import { LayoutDashboard, LogOut } from "lucide-react";
  6 | // import Popover from "@/components/shared/popover";
  7 | import Image from "next/image";
  8 | // import { Session } from "next-auth";
  9 | import { Button } from "@/components/ui/button"
 10 | import { Input } from "@/components/ui/input"
 11 | import { Label } from "@/components/ui/label"
 12 | import {
 13 |   Popover,
 14 |   PopoverContent,
 15 |   PopoverTrigger,
 16 | } from "@/components/ui/popover"
 17 | import { useDescope, useUser } from "@descope/nextjs-sdk/client";
 18 | export default function UserDropdown({ sessionToken }: { sessionToken: string }) {
 19 |   // const { email, image } = session?.token || {};
 20 |   const [openPopover, setOpenPopover] = useState(false);
 21 |   
 22 |   const sdk = useDescope();
 23 | 
 24 |   const { isUserLoading, user } = useUser();
 25 | 
 26 |   const handleLogout = () => {
 27 |     sdk.logout();
 28 |     window.location.reload();
 29 |   }
 30 |   
 31 |   if (isUserLoading) return null;
 32 |   const email = user.userId;
 33 |   let name = user.name || "";
 34 |   
 35 |   return (
 36 |     <div className="relative inline-block text-left">
 37 |     <Popover>
 38 |       <PopoverTrigger asChild>
 39 |       <button
 40 |           onClick={() => setOpenPopover(!openPopover)}
 41 |           className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border border-gray-300 transition-all duration-75 focus:outline-none active:scale-95 sm:h-9 sm:w-9"
 42 |         >
 43 |           <img
 44 |             alt={email}
 45 |             src={`https://api.dicebear.com/8.x/adventurer/svg?seed=Tiger`}
 46 |             width={40}
 47 |             height={40}
 48 |           />
 49 |         </button>
 50 |         {/* <Button variant="outline">Open popover</Button> */}
 51 |       </PopoverTrigger>
 52 |       <PopoverContent className="w-80">
 53 |       <div className="w-full rounded-md bg-white p-2 sm:w-56">
 54 |             <div className="p-2">
 55 |               {name && (
 56 |                 <p className="truncate text-sm font-medium text-gray-900">
 57 |                   {name}
 58 |                 </p>
 59 |               )}
 60 |               <p className="truncate text-sm text-gray-500">
 61 |                 {email}
 62 |               </p>
 63 |             </div>
 64 |             <button
 65 |               className="relative flex w-full cursor-not-allowed items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100"
 66 |               disabled
 67 |             >
 68 |               <LayoutDashboard className="h-4 w-4" />
 69 |               <p className="text-sm">Dashboard</p>
 70 |             </button>
 71 |             <button
 72 |               className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100"
 73 |               onClick={() => handleLogout()}
 74 |             >
 75 |               <LogOut className="h-4 w-4" />
 76 |               <p className="text-sm">Logout</p>
 77 |             </button>
 78 |           </div>
 79 |         {/* <div className="grid gap-4">
 80 |           <div className="space-y-2">
 81 |             <h4 className="font-medium leading-none">Dimensions</h4>
 82 |             <p className="text-sm text-muted-foreground">
 83 |               Set the dimensions for the layer.
 84 |             </p>
 85 |           </div>
 86 |           <div className="grid gap-2">
 87 |             <div className="grid grid-cols-3 items-center gap-4">
 88 |               <Label htmlFor="width">Width</Label>
 89 |               <Input
 90 |                 id="width"
 91 |                 defaultValue="100%"
 92 |                 className="col-span-2 h-8"
 93 |               />
 94 |             </div>
 95 |             <div className="grid grid-cols-3 items-center gap-4">
 96 |               <Label htmlFor="maxWidth">Max. width</Label>
 97 |               <Input
 98 |                 id="maxWidth"
 99 |                 defaultValue="300px"
100 |                 className="col-span-2 h-8"
101 |               />
102 |             </div>
103 |             <div className="grid grid-cols-3 items-center gap-4">
104 |               <Label htmlFor="height">Height</Label>
105 |               <Input
106 |                 id="height"
107 |                 defaultValue="25px"
108 |                 className="col-span-2 h-8"
109 |               />
110 |             </div>
111 |             <div className="grid grid-cols-3 items-center gap-4">
112 |               <Label htmlFor="maxHeight">Max. height</Label>
113 |               <Input
114 |                 id="maxHeight"
115 |                 defaultValue="none"
116 |                 className="col-span-2 h-8"
117 |               />
118 |             </div>
119 |           </div>
120 |         </div> */}
121 |       </PopoverContent>
122 |     </Popover>
123 |   
124 | 
125 |       {/* <Popover
126 |         content={
127 |           <div className="w-full rounded-md bg-white p-2 sm:w-56">
128 |             <div className="p-2">
129 |               {session?.user?.name && (
130 |                 <p className="truncate text-sm font-medium text-gray-900">
131 |                   {session?.user?.name}
132 |                 </p>
133 |               )}
134 |               <p className="truncate text-sm text-gray-500">
135 |                 {session?.user?.email}
136 |               </p>
137 |             </div>
138 |             <button
139 |               className="relative flex w-full cursor-not-allowed items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100"
140 |               disabled
141 |             >
142 |               <LayoutDashboard className="h-4 w-4" />
143 |               <p className="text-sm">Dashboard</p>
144 |             </button>
145 |             <button
146 |               className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100"
147 |               onClick={() => signOut()}
148 |             >
149 |               <LogOut className="h-4 w-4" />
150 |               <p className="text-sm">Logout</p>
151 |             </button>
152 |           </div>
153 |         }
154 |         align="end"
155 |         openPopover={openPopover}
156 |         setOpenPopover={setOpenPopover}
157 |       >
158 |         <button
159 |           onClick={() => setOpenPopover(!openPopover)}
160 |           className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border border-gray-300 transition-all duration-75 focus:outline-none active:scale-95 sm:h-9 sm:w-9"
161 |         >
162 |           <Image
163 |             alt={email}
164 |             src={image || `https://avatars.dicebear.com/api/micah/${email}.svg`}
165 |             width={40}
166 |             height={40}
167 |           />
168 |         </button>
169 |       </Popover> */}
170 |     </div>
171 |   );
172 | }
173 | 


--------------------------------------------------------------------------------