Next Descope Example

Getting Started

1. Create .env.local with the following variables:

// .env.local
# Your project id
NEXT_PUBLIC_DESCOPE_PROJECT_ID=<project-id>
# Flow id to run, e.g. sign-up-or-in
NEXT_PUBLIC_DESCOPE_FLOW_ID=<flow-id>
# Optional - Descope base url, either https://api.descope.com, https://api.sandbox.descope.com or http://localhost:8000
NEXT_PUBLIC_DESCOPE_BASE_URL=<base-url>

Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

App Content

This app contains 2 components:

Home Page

a. When user is not logged-in:

• "Login" button (navigate to "Login page")
• "Not Validated" user data that returned from server side props (see more details below)

b. When user is logged-in

• The logged in user name (or id)
• "Logout" button
• "Submit" form, to demonstrate api (form) usage (see more details below)
• "Validated" user data that returned from server side props

Login Page

• Shows login flow (Descope component)

What Does Descope Example Shows?

Caveat

This is an early stage example. This example may change in the near future. We will appreciate any feedback!

• AuthProvider usage The App component (pages/_app.tsx) is wrapped with <AuthProvider ... > ... </AuthProvider> component.

• useAuth usage The Home component (pages/index.tsx) uses multiple functions/constants return from this hook, such as authenticated, user, logout and more.

• Descope usage The Home component (pages/index.tsx) loads Descope in a dynamic manner (CSR only), and renders it.

• Validating session Validating session (utils/auth.ts) uses Descope NodeJS sdk instance's validateSession method. This is used in

• getServerSideProps (pages/index.tsx), to pass different data fetching.

• API handler (pages/api/form.ts), to validate form request that is called from the Home page

NOTE: For a case that the Descope project manages token response on BODY (in contrast to manage on COOKIES), the Login component set the refresh token on the DSR cookie (see getRefreshToken() usage). This is done in order to be able to use it on getServerSideProps data fetching. Prefer using this function only for testing, and to manage token response in COOKIES. When Descope project manages token response on cookies, Descope set the refresh token, and getRefreshToken is not needed