Getting Started

HTML Quickstart

This guide will only include the frontend integration. If you would like to also handle Session Management in your backend, select your backend technology below:

This is a quickstart guide to help you integrate Descope with your HTML application. Follow the steps below to get started.

Import SDK

You must import our WebJS and Web Component SDKs in order to use the Descope Flows component.

index.html
<!DOCTYPE html>
<html>
  <head>
	<script src="https://unpkg.com/@descope/web-component@x.x.x/dist/index.js"></script>
	<script src="https://unpkg.com/@descope/web-js-sdk@x.x.x/dist/index.umd.js"></script>
  </head>
 
  <body>
    <h1>Log In With Descope Flows</h1>
    <p id="container"></p>
 
	<script></script>
  </body>
</html>

Import Descope Functions and Add Flows Component

To trigger the Descope Flow, you will need to add this component. The screens you've customized in your Flow will appear here. You can also customize the component with the following:

  • flowId: ID of the flow you wish to use
  • onSuccess and onError: functions that execute when authentication succeeds or fails

Note

If you are using the autoRefresh token feature in the WebJS SDK, you will need to call sdk.refresh() in your onSuccess() function.

You can use the logic below to validate whether or not a user is logged in, before deciding to display the login flow. You can use the following parameters when initializing the SDK:

  • persistTokens: this will force existing tokens to be included in all outgoing requests
  • autoRefresh: this will automatically refresh sessions once they are expired, if the refresh token is valid

Note

For the full list of component customization options, refer to our Descope Components Customization Doc.

index.html
<!DOCTYPE html>
<html>
  <head>
	<script src="https://unpkg.com/@descope/web-component@x.x.x/dist/index.js"></script>
	<script src="https://unpkg.com/@descope/web-js-sdk@x.x.x/dist/index.umd.js"></script>
  </head>
 
  <body>
	<h1>Log In With Descope Flows</h1>
    <p id="container"></p>
 
	<script>
		const sdk = Descope({ projectId: '__ProjectID__', persistTokens: true, autoRefresh: true });
 
		const sessionToken = sdk.getSessionToken()
		var notValidToken
		if (sessionToken) {
			notValidToken = sdk.isJwtExpired(sessionToken)
		}
		if (!sessionToken || notValidToken) {
			var container = document.getElementById('container');
			container.innerHTML = '<descope-wc project-id="__ProjectID__" flow-id="sign-up-or-in"></descope-wc>';
			const onSuccess = (e) => {
				sdk.refresh(),
			};
 
		}
	</script>
  </body>
</html>

Make Sure Session Persists Across All Pages

On all of your frontend pages, you'll need to make sure that sdk.refresh() is called at the top of each page in <script> tags. Add the following logic to every authenticated page you have in your application.

index.html
<!DOCTYPE html>
<html>
  <head><!-- ... --></head>
 
  <body><!-- ... --></body>
</html>
 
<!-- Add below lines to all your authenticated pages -->
<script src="https://unpkg.com/@descope/web-js-sdk@x.x.x/dist/index.umd.js"></script>
<script>
  sdk.refresh()
  // Rest of your logic ...
</script>

Continue with Backend SDK

If you would like to also handle Session Management in your backend, keep on reading by selecting your backend technology below:

Checkpoint

Your application is now integrated with Descope. Please test with sign-up or sign-in use case.

Need help?

Customize

Now that you have the end-to-end application working, you can choose to configure and personalize many different areas of Descope, including your brand, style, custom user authentication journeys, etc. We recommend starting with customizing your user-facing screens, such as signup and login.

Customize

ArrowRight
Was this helpful?

Previous

Django

Next

Python

On this page

HTML QuickstartContinue with Backend SDKCustomize