Descope Authentication Hosting App

This is a React web application that runs Descope's login flows according to the project created in your Descope account.

Deployment

By default, the app is deployed to the Descope hosting page in https://api.descope.com/login.
The main purpose is to allow easy integration for descopers implementing authentication with Descope (such as OIDC use case).

In case you want to have your own hosted page (customize styling, your own domain, etc.), you can use this repository as a template, do the relevant modification and host it (using Vercel, etc.)

---

Open ID Connect (OIDC) use cases in Descope

Descope allows you to integrate with your existing Identity Provider (IdP) via OpenID Connect (OIDC) or with any deployed OIDC client.
With this implementation, you can seamlessly add Descope authentication to your application utilizing any OIDC provider.

You can refer to either the main documentation on how to set it up, or you can review a few of the tutorials published that showcase how to use Descope with many major existing identity providers:

• Auth0
• Cognito
• Firebase
• Salesforce

---

Running locally

• yarn install
• yarn start
• Go to http://localhost:3000/<PROJECT_ID>

Using URL params

• Descope's deployment: https://auth.descope.io/<PROJECT_ID>
• Locally: http://localhost:3000/<PROJECT_ID>?flow=sign-in&debug=true

These are the different query parameters you can use:

1. <PROJECT_ID> as part of the URL path is required to use the desired Descope's PROJECT_ID

2. flow query parameter is optional. If none provided the default flow is sign-up-or-in

3. tenant query parameter is optional. You can input a Tenant ID or Tenant Domain to use with this query parameter (e.g. tenant=descope.com or tenant=T2UjlUN1tJsRnrV3jnAkJ3WziaEq).

If present, then you will be able to authenticate via SSO, without having to first specify an email with an input screen in your flow.

4. debugquery parameter is optional. If debug mode is needed usedebug=true

5. bg query parameter is optional. If you wish to use a different background color or URL, you can use this parameter.

   • Color name: You can use a web color, e.g. bg=red, bg=%23ff0000. Note that some symbols such as # will have to be URL encoded.
   • Image URL: You can specify a URL to an image such as https://example.com/background.png. This image will be sized to cover the screen.

6. wide query parameter is optional. If wide mode is nedded use wide=true. This will widen the flow component that is rendered, which is used for large forms made with Flow screens.

7. theme query parameter is optional. The default value is light, but otherwise it will override the theme for your flows rendered with the SDK.

8. style query parameter is optional. The default style in your project will be used if not defined, but this allows you to override the style for the flows rendered with the SDK.

9. store_last_auth_user query parameter is optional. Pass this parameter to ensure the last authenticated user is not saved when the flow ends. For example, append store_last_auth_user=false to the URL to disable saving the last user.

10. Additional query parameters prefixed with client. are passed to the Descope component as its client prop. For example: client.k1=v1&client.k2=v2 becomes { k1: 'v1', k2: 'v2' }.

11. width & height are optional query parameters, controlling the sizing of the flow screen in either pixels or a percentage of the viewport (e.g. 50%, 1200px). Any value larger than the screen is clamped down.

Using .env

In case you don't want to provide the project ID as part of the URL, you can specify it as an environment variable DESCOPE_PROJECT_ID.
You can use .env file for that.
From the project root directory run: cp .env.example .env, and set your Descope Project and flow IDs.

Using docker

In case you want to use the docker version these are the steps:

1. Build (Official hosted docker image is comming soon)

# Optional build-args: (ex - using custom API host or pinning the project id)
docker build
	--build-arg REACT_APP_DESCOPE_BASE_URL="https://api.descope.com"
	--build-arg REACT_APP_CONTENT_BASE_URL="https://static.descope.com/pages"
	--build-arg REACT_APP_USE_ORIGIN_BASE_URL="false"
	--build-arg REACT_APP_FAVICON_URL="https://imgs.descope.com/auth-hosting/favicon.svg"
	--build-arg DESCOPE_PROJECT_ID=""
	--build-arg DESCOPE_FLOW_ID=""
	--tag my-registry.com/descope/auth-hosting
	--push
	.

2. Run

docker run -p 8080:8080 auth-hosting
# (optional) the build-args are available also during run-time as env vars:
docker run -p 8080:8080
	-e REACT_APP_DESCOPE_BASE_URL="https://api.descope.com"
	-e REACT_APP_CONTENT_BASE_URL="https://static.descope.com/pages"
	-e REACT_APP_USE_ORIGIN_BASE_URL="false"
	-e REACT_APP_FAVICON_URL="https://imgs.descope.com/auth-hosting/favicon.svg"
	-e DESCOPE_PROJECT_ID=""
	-e DESCOPE_FLOW_ID=""
	my-registry.com/descope/auth-hosting