{"id":18896472,"url":"https://github.com/descope/descope-next-js","last_synced_at":"2025-04-15T02:36:28.216Z","repository":{"id":221358497,"uuid":"569663934","full_name":"descope/descope-next-js","owner":"descope","description":"Next.js library used to integrate with Descope (Deprecated)","archived":true,"fork":false,"pushed_at":"2024-07-28T16:41:24.000Z","size":2415,"stargazers_count":20,"open_issues_count":11,"forks_count":0,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-04-11T21:20:02.088Z","etag":null,"topics":["authentication","deprecated-repo","descope","next","next-sdk","nextjs","nextjs-sdk","sdk"],"latest_commit_sha":null,"homepage":"https://github.com/descope/descope-js/tree/main/packages/sdks/nextjs-sdk","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/descope.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-23T10:42:52.000Z","updated_at":"2024-12-29T09:14:56.000Z","dependencies_parsed_at":"2024-03-12T12:51:01.313Z","dependency_job_id":"9f4482bc-fd0f-4a95-90b7-1925046e8be9","html_url":"https://github.com/descope/descope-next-js","commit_stats":null,"previous_names":["descope/descope-next-js","descope/nextjs-sdk"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/descope%2Fdescope-next-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/descope%2Fdescope-next-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/descope%2Fdescope-next-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/descope%2Fdescope-next-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/descope","download_url":"https://codeload.github.com/descope/descope-next-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248995093,"owners_count":21195495,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","deprecated-repo","descope","next","next-sdk","nextjs","nextjs-sdk","sdk"],"created_at":"2024-11-08T08:34:05.898Z","updated_at":"2025-04-15T02:36:26.905Z","avatar_url":"https://github.com/descope.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# IMPORTANT NOTE: This repository is _DEPRECATED_.\n\nDescope Nextjs SDK has been moved to the [descope-js](https://github.com/descope/descope-js/tree/main/packages/sdks/nextjs-sdk) repoistory.\n\n---\n\n# Descope SDK for NextJS\n\nThe Descope SDK for NextJS provides convenient access to the Descope for an application written on top of NextJS. You can read more on the [Descope Website](https://descope.com).\n\nThis SDK uses under the hood the Descope React SDK and Descope Node SDK\nRefer to the [Descope React SDK](https://github.com/descope/descope-js/tree/main/packages/sdks/react-sdk) and [Descope Node SDK](https://github.com/descope/node-sdk) for more details.\n\n## Requirements\n\n- The SDK supports NextJS version 13 and above.\n- A Descope `Project ID` is required for using the SDK. Find it on the [project page in the Descope Console](https://app.descope.com/settings/project).\n\n## Installing the SDK\n\nInstall the package with:\n\n```bash\nnpm i --save @descope/nextjs-sdk\n```\n\n## Usage\n\nThis section contains guides for App router and Pages router.\nFor Pages router, see the [Pages Router](#pages-router) section.\n\n### App Router\n\n#### Wrap your app layout with Auth Provider\n\n```js\n// src/app/layout.tsx\n\nimport { AuthProvider } from '@descope/nextjs-sdk';\n\nexport default function RootLayout({\n\tchildren\n}: {\n\tchildren: React.ReactNode\n}) {\n\treturn (\n\t\t\u003cAuthProvider projectId=\"your-descope-project-id\"\u003e\n\t\t\t\u003chtml lang=\"en\"\u003e\n\t\t\t\t\u003cbody\u003e{children}\u003c/body\u003e\n\t\t\t\u003c/html\u003e\n\t\t\u003c/AuthProvider\u003e\n\t);\n}\n```\n\nNote: `AuthProvider` uses `sessionTokenViaCookie` by default, in order that the [AuthMiddleware](\u003c#Require-authentication-for-application-(Middleware)\u003e) will work out of the box.\n\n#### Use Descope to render Flow\n\nYou can use **default flows** or **provide flow id** directly to the Descope component\n\n```js\n// Login page, e.g. src/app/sign-in.tsx\nimport { Descope } from '@descope/nextjs-sdk';\n// you can choose flow to run from the following without `flowId` instead\n// import { SignInFlow, SignUpFlow, SignUpOrInFlow } from '@descope/nextjs-sdk'\n\nconst Page = () =\u003e {\n\treturn (\n\t\t\u003cDescope\n\t\t\tflowId=\"sign-up-or-in\"\n\t\t\tonSuccess={(e) =\u003e console.log('Logged in!')}\n\t\t\tonError={(e) =\u003e console.log('Could not logged in!')}\n\t\t\tredirectAfterSuccess=\"/\"\n\t\t\t// redirectAfterError=\"/error-page\"\n\t\t/\u003e\n\t);\n};\n```\n\nRefer to the [Descope React SDK Section](https://github.com/descope/react-sdk?tab=readme-ov-file#2-provide-flow-id) for a list of available props.\n\n**Note:** Descope is a client component. if the component that renders it is a server component, you cannot pass `onSuccess`/`onError`/`errorTransformer`/`logger` props because they are not serializable. To redirect the user after the flow is completed, use the `redirectAfterSuccess` and `redirectAfterError` props.\n\n#### Client Side Usage\n\nUse the `useDescope`, `useSession` and `useUser` hooks in your components in order to get authentication state, user details and utilities\n\nThis can be helpful to implement application-specific logic. Examples:\n\n- Render different components if current session is authenticated\n- Render user's content\n- Logout button\n\nNote: these hooks should be used in a client component only (For example, component with `use client` notation).\n\n```js\n'use client';\nimport { useDescope, useSession, useUser } from '@descope/nextjs-sdk/client';\nimport { useCallback } from 'react';\n\nconst App = () =\u003e {\n\t// NOTE - `useDescope`, `useSession`, `useUser` should be used inside `AuthProvider` context,\n\t// and will throw an exception if this requirement is not met\n\t// useSession retrieves authentication state, session loading status, and session token\n\tconst { isAuthenticated, isSessionLoading, sessionToken } = useSession();\n\t// useUser retrieves the logged in user information\n\tconst { user } = useUser();\n\t// useDescope retrieves Descope SDK for further operations related to authentication\n\t// such as logout\n\tconst sdk = useDescope();\n\n\tif (isSessionLoading || isUserLoading) {\n\t\treturn \u003cp\u003eLoading...\u003c/p\u003e;\n\t}\n\n\tconst handleLogout = useCallback(() =\u003e {\n\t\tsdk.logout();\n\t}, [sdk]);\n\n\tif (isAuthenticated) {\n\t\treturn (\n\t\t\t\u003c\u003e\n\t\t\t\t\u003cp\u003eHello {user.name}\u003c/p\u003e\n\t\t\t\t\u003cbutton onClick={handleLogout}\u003eLogout\u003c/button\u003e\n\t\t\t\u003c/\u003e\n\t\t);\n\t}\n\n\treturn \u003cp\u003eYou are not logged in\u003c/p\u003e;\n};\n```\n\n#### Server Side Usage\n\n##### Require authentication for application (Middleware)\n\nYou can use NextJS Middleware to require authentication for a page/route or a group of pages/routes.\n\nDescope SDK provides a middleware function that can be used to require authentication for a page/route or a group of pages/routes.\n\n```js\n// src/middleware.ts\nimport { authMiddleware } from '@descope/nextjs-sdk/server'\n\nexport default authMiddleware({\n\t// The Descope project ID to use for authentication\n\t// Defaults to process.env.DESCOPE_PROJECT_ID\n\tprojectId: 'your-descope-project-id'\n\n\t// The URL to redirect to if the user is not authenticated\n\t// Defaults to process.env.SIGN_IN_ROUTE or '/sign-in' if not provided\n\t// NOTE: In case it contains query parameters that exist in the original URL, they will override the original query parameters. e.g. if the original URL is /page?param1=1\u0026param2=2 and the redirect URL is /sign-in?param1=3, the final redirect URL will be /sign-in?param1=3\u0026param2=2\n\tredirectUrl?: string\n\n\t// An array of public routes that do not require authentication\n\t// In addition to the default public routes:\n\t// - process.env.SIGN_IN_ROUTE or /sign-in if not provided\n\t// - process.env.SIGN_UP_ROUTE or /sign-up if not provided\n\tpublicRoutes?: string[]\n})\n\nexport const config = {\n\tmatcher: ['/((?!.+\\\\.[\\\\w]+$|_next).*)', '/', '/(api|trpc)(.*)']\n}\n```\n\n##### Read session information in server side\n\nuse the `session()` helper to read session information in Server Components and Route handlers.\n\nNote: `session()` requires the `authMiddleware` to be used for the Server Component or Route handler that uses it.\n\nServer Component:\n\n```js\n// src/app/page.tsx\n\nimport { session } from '@descope/nextjs-sdk/server';\n\nasync function Page() {\n\tconst sessionRes = session();\n\tif (!sessionRes) {\n\t\t// ...\n\t}\n\t// Use the session jwt or parsed token\n\tconst { jwt, token } = sessionRes;\n}\n```\n\nRoute handler:\n\n```js\n// src/pages/api/routes.ts\nexport async function GET() {\n\tconst currSession = session();\n\tif (!currSession.isAuthenticated) {\n\t\t// ...\n\t}\n\n\t// Use the session jwt or parsed token\n\tconst { jwt, token } = currSession;\n}\n```\n\n#### Access Descope SDK in server side\n\nUse `createSdk` function to create Descope SDK in server side.\n\nRefer to the [Descope Node SDK](https://github.com/descope/node-sdk/?tab=readme-ov-file#authentication-functions) for a list of available functions.\n\nUsage example in Route handler:\n\n```js\n// src/pages/api/routes.ts\nimport { createSdk } from '@descope/nextjs-sdk/server';\n\nconst sdk = createSdk({\n\t// The Descope project ID to use for authentication\n\t// Defaults to process.env.DESCOPE_PROJECT_ID\n\tprojectId: 'your-descope-project-id',\n\n\t// The Descope management key to use for management operations\n\t// Defaults to process.env.DESCOPE_MANAGEMENT_KEY\n\tmanagementKey: 'your-descope-management-key'\n\n\t// Optional: Descope API base URL\n\t// Defaults to process.env.DESCOPE_BASE_URL\n\t// baseUrl: 'https://...'\n});\n\nexport async function GET(req) {\n\tconst { searchParams } = new URL(req.url);\n\tconst loginId = searchParams.get('loginId');\n\n\tconst { ok, data: user } = await sdk.management.user.load(loginId);\n\tif (!ok) {\n\t\t// ...\n\t}\n\t// Use the user data ...\n}\n```\n\n### Pages Router\n\nThis section is Working in progress :-)\nIn the meantime, you can see the example in the [Pages Router](/examples/pages-router/) folder.\n\n### Widgets\n\nWidgets are components that allow you to expose management features for tenant-based implementation. In certain scenarios, your customers may require the capability to perform managerial actions independently, alleviating the necessity to contact you. Widgets serve as a feature enabling you to delegate these capabilities to your customers in a modular manner.\n\nImportant Note:\n\n- For the user to be able to use the widget, they need to be assigned the `Tenant Admin` Role.\n\n#### User Management\n\nThe `UserManagement` widget will let you embed a user table in your site to view and take action.\n\nThe widget lets you:\n\n- Create a new user\n- Edit an existing user\n- Activate / disable an existing user\n- Reset an existing user's password\n- Remove an existing user's passkey\n- Delete an existing user\n\nNote:\n\n- Custom fields also appear in the table.\n\n###### Usage\n\n```js\nimport { UserManagement } from '@descope/nextjs-sdk';\n...\n  \u003cUserManagement\n    widgetId=\"user-management-widget\"\n    tenant=\"tenant-id\"\n  /\u003e\n```\n\nExample:\n[Manage Users](./examples/app-router/app/manage-users/page.tsx)\n\n#### Role Management\n\nThe `RoleManagement` widget will let you embed a role table in your site to view and take action.\n\nThe widget lets you:\n\n- Create a new role\n- Change an existing role's fields\n- Delete an existing role\n\nNote:\n\n- The `Editable` field is determined by the user's access to the role - meaning that project-level roles are not editable by tenant level users.\n- You need to pre-define the permissions that the user can use, which are not editable in the widget.\n\n###### Usage\n\n```js\nimport { RoleManagement } from '@descope/nextjs-sdk';\n...\n  \u003cRoleManagement\n    widgetId=\"role-management-widget\"\n    tenant=\"tenant-id\"\n  /\u003e\n```\n\nExample:\n[Manage Roles](./examples/app-router/app/manage-roles/page.tsx)\n\n#### Access Key Management\n\nThe `AccessKeyManagement` widget will let you embed an access key table in your site to view and take action.\n\nThe widget lets you:\n\n- Create a new access key\n- Activate / deactivate an existing access key\n- Delete an exising access key\n\n###### Usage\n\n```js\nimport { AccessKeyManagement } from '@descope/nextjs-sdk';\n{\n\t/* admin view: manage all tenant users' access keys */\n}\n\u003cAccessKeyManagement\n\twidgetId=\"access-key-management-widget\"\n\ttenant=\"tenant-id\"\n/\u003e;\n\n{\n\t/* user view: mange access key for the logged-in tenant's user */\n}\n\u003cAccessKeyManagement\n\twidgetId=\"user-access-key-management-widget\"\n\ttenant=\"tenant-id\"\n/\u003e;\n```\n\nExample:\n[Manage Access Keys](./examples/app-router/app/manage-access-keys/page.tsx)\n\n#### Audit Management\n\nThe `AuditManagement` widget will let you embed an audit table in your site.\n\n###### Usage\n\n```js\nimport { AuditManagement } from '@descope/nextjs-sdk';\n...\n  \u003cAuditManagement\n    widgetId=\"audit-management-widget\"\n    tenant=\"tenant-id\"\n  /\u003e\n```\n\nExample:\n[Manage Audit](./examples/app-router/app/manage-audit/page.tsx)\n\n#### User Profile\n\nThe `UserProfile` widget lets you embed a user profile component in your app and let the logged in user update his profile.\n\nThe widget lets you:\n\n- Update user profile picture\n- Update user personal information\n- Update authentication methods\n- Logout\n\n###### Usage\n\n```js\nimport { UserProfile } from '@descope/nextjs-sdk';\n...\n  \u003cUserProfile\n    widgetId=\"user-profile-widget\"\n    onLogout={() =\u003e {\n      // add here you own logout callback\n      window.location.href = '/login';\n    }}\n  /\u003e\n```\n\nExample:\n[User Profile](./examples/app-router/app/my-user-profile/page.tsx)\n\n## Code Example\n\nYou can find an example react app in the [examples folder](./examples). - [App Router](/examples/app-router/) - [Pages Router](/examples/pages-router/)\n\n## Learn More\n\nTo learn more please see the [Descope Documentation and API reference page](https://docs.descope.com/).\n\n## Contact Us\n\nIf you need help you can email [Descope Support](mailto:support@descope.com)\n\n## License\n\nThe Descope SDK for React is licensed for use under the terms and conditions of the [MIT license Agreement](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdescope%2Fdescope-next-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdescope%2Fdescope-next-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdescope%2Fdescope-next-js/lists"}