├── src ├── middleware.ts ├── app │ ├── favicon.ico │ ├── api │ │ ├── auth │ │ │ └── [...nextauth] │ │ │ │ └── route.ts │ │ └── app │ │ │ └── route.ts │ ├── globals.css │ ├── layout.tsx │ └── page.tsx └── auth.ts ├── public ├── vercel.svg ├── window.svg ├── file.svg ├── globe.svg └── next.svg ├── next.config.ts ├── renovate.json ├── postcss.config.mjs ├── tailwind.config.ts ├── .env.local.example ├── .gitignore ├── tsconfig.json ├── package.json └── README.md /src/middleware.ts: -------------------------------------------------------------------------------- 1 | export { auth as middleware } from "@/auth"; 2 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/3rd-party-sample-app/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/api/auth/[...nextauth]/route.ts: -------------------------------------------------------------------------------- 1 | import { handlers } from "@/auth"; // Referring to the auth.ts we just created 2 | export const { GET, POST } = handlers -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 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 | -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --background: #ffffff; 7 | --foreground: #171717; 8 | } 9 | 10 | @media (prefers-color-scheme: dark) { 11 | :root { 12 | --background: #0a0a0a; 13 | --foreground: #ededed; 14 | } 15 | } 16 | 17 | body { 18 | color: var(--foreground); 19 | background: var(--background); 20 | font-family: Arial, Helvetica, sans-serif; 21 | } 22 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | export default { 4 | content: [ 5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | colors: { 12 | background: "var(--background)", 13 | foreground: "var(--foreground)", 14 | }, 15 | }, 16 | }, 17 | plugins: [], 18 | } satisfies Config; 19 | -------------------------------------------------------------------------------- /.env.local.example: -------------------------------------------------------------------------------- 1 | AUTH_SECRET="" # Added by `npx auth`. Read more: https://cli.authjs.dev 2 | CLIENT_SECRET="" # The client Secret of the configured 3rd party application within Descope. 3 | CLIENT_ID="" # The client ID of the configured 3rd party application within Descope. 4 | BASE_URL="https://api.descope.com" # The custom CNAME URL of your Descope project. If not configured, leave as is. 5 | PROJECT_ID="" # The project ID of your Descope project. 6 | SCOPES="openid" # The scope of the user. If not configured, leave as is. 7 | CONSENT_SCOPES="" # The consent scope to validate for the user, these would be configured under permission scopes within Descope. If not configured, leave as is. -------------------------------------------------------------------------------- /.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.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | 32 | # env files (can opt-in for committing if needed) 33 | .env.local 34 | 35 | # vercel 36 | .vercel 37 | 38 | # typescript 39 | *.tsbuildinfo 40 | next-env.d.ts 41 | 42 | yarn.lock 43 | package-lock.json -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "oauth-apps", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev --turbopack", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "15.4.10", 13 | "next-auth": "^5.0.0-beta.25", 14 | "react": "^18", 15 | "react-dom": "^18" 16 | }, 17 | "devDependencies": { 18 | "@stylistic/eslint-plugin-ts": "^2.11.0", 19 | "@types/node": "^20", 20 | "@types/react": "^18", 21 | "@types/react-dom": "^18", 22 | "eslint": "^8", 23 | "eslint-config-next": "15.0.3", 24 | "postcss": "^8", 25 | "tailwindcss": "^3.4.1", 26 | "typescript": "^5" 27 | }, 28 | "packageManager": "yarn@4.5.3" 29 | } 30 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { SessionProvider } from "next-auth/react"; 3 | import { Geist, Geist_Mono } from "next/font/google"; 4 | import "./globals.css"; 5 | 6 | export const metadata: Metadata = { 7 | title: "Create Next App", 8 | description: "Generated by create next app", 9 | }; 10 | 11 | const geist = Geist({ subsets: ["latin"] }); 12 | const geistMono = Geist_Mono({ subsets: ["latin"] }); 13 | 14 | export default function RootLayout({ 15 | children, 16 | }: Readonly<{ 17 | children: React.ReactNode; 18 | }>) { 19 | return ( 20 | 21 | 22 | {children} 23 | 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/app/api/app/route.ts: -------------------------------------------------------------------------------- 1 | import { auth, baseUrl, clientId, clientSecret, consentScopes } from "@/auth"; 2 | import { NextResponse } from "next/server"; 3 | 4 | export const GET = auth(async function GET(req) { 5 | if (req.auth) { 6 | const body = "grant_type=client_credentials" + 7 | "&client_id=" + clientId + 8 | "&client_secret=" + clientSecret + 9 | "&scope=" + consentScopes; 10 | const res = await fetch(`${baseUrl}/oauth2/v1/apps/token`, { 11 | method: "POST", 12 | headers: { 13 | "content-type": "application/x-www-form-urlencoded", 14 | }, 15 | body, 16 | }); 17 | return NextResponse.json(await res.json(), { status: res.status }); 18 | } 19 | return NextResponse.json({ message: "Not authenticated" }, { status: 401 }) 20 | }) as any; -------------------------------------------------------------------------------- /public/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 3rd-party-sample-app 2 | 3 | This is a sample application to get you familiarized with working with Descope's 3rd party sample applications 4 | 5 | ## Getting Started 6 | 7 | In order to launch this app: 8 | 9 | 1. Clone the repo 10 | 11 | ``` 12 | git clone git@github.com:descope-sample-apps/3rd-party-sample-app.git 13 | ``` 14 | 15 | 2. Set up Descope environment variables in .env.local file 16 | 17 | Either copy the below, or copy the included `.env.local.example` to `.env.example`. Provide the applicable configurations for your project. 18 | 19 | ``` 20 | AUTH_SECRET="" # Added by `npx auth`. Read more: https://cli.authjs.dev 21 | CLIENT_SECRET="" # The client Secret of the configured 3rd party application within Descope. 22 | CLIENT_ID="" # The client ID of the configured 3rd party application within Descope. 23 | BASE_URL="https://api.descope.com" # The custom CNAME URL of your Descope project. If not configured, leave as is. 24 | PROJECT_ID="" # The project ID of your Descope project. 25 | SCOPES="openid" # The scope of the user. If not configured, leave as is. 26 | CONSENT_SCOPES="" # The consent scope to validate for the user, these would be configured under permission scopes within Descope. If not configured, leave as is. 27 | ``` 28 | 29 | 3. Install dependencies 30 | 31 | ``` bash 32 | npm i 33 | # or 34 | yarn install 35 | ``` 36 | 37 | 4. Start the app 38 | 39 | ```bash 40 | npm run dev 41 | # or 42 | yarn dev 43 | ``` 44 | 45 | ## Utilizing the Application 46 | 47 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the application. 48 | 49 | ### Initiate a 3rd Party Application Consent 50 | 51 | You can initiate a 3rd Party Consent by clicking on the `Connect Descoper Site`. This will navigate to the `Flow Hosting URL` configured within the 3rd Party Application within Descope. 52 | 53 | #### Partner Application Side 54 | 55 | Once you have authenticated, within the Partner Application Pane of the application, you can then refresh the user's tokens, or sign out of the application. The user's `id_token` is parsed to be human readable, and the access_token and refresh_token are displayed 56 | 57 | #### Partner Backend Side 58 | 59 | Within the right-hand side of the application, you can click the `Get App Token` button to fetch the application's `access_token` which can then be used to query for a user's `access_token` to do stuff on their behalf 60 | 61 | ## Learn More 62 | 63 | To learn more about Next.js, take a look at the following resources: 64 | 65 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 66 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 67 | 68 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! 69 | -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { signIn, signOut, useSession } from "next-auth/react"; 3 | import { useState } from "react"; 4 | 5 | export default function Home() { 6 | const [appToken, setAppToken] = useState