Skip to main content

Integrate your application using the Quickstart tab

When you register an application, SecureAuth and your application need to know how to talk to each other. The Quickstart tab makes that connection concrete: it generates integration code specific to your framework, pre-filled with your application's actual configuration. You don't need to look up or manually copy any values.

The Quickstart tab showing the scenario selector with User Login selected, React framework tab active, Step-by-Step display mode, and the application configuration panel on the right

Use the Quickstart tab​

  1. In your workspace, go to Applications and open a registered application.

  2. Select the Quickstart tab.

  3. Choose a scenario:

    • User Login – The standard sign-in flow. Users click to log in, are redirected to SecureAuth to authenticate, and return to your application. Uses Authorization Code + PKCE, a secure flow designed for browser and mobile apps.
    • Token Refresh – Lets your application silently renew a user's session when their access token expires, without asking them to log in again. Requires the offline_access scope.

  4. Select your framework. The Quickstart generates library-specific code, so the instructions for React look different from those for Vue or Angular.

  5. Choose a display mode:

    • Step-by-Step – Walks through each integration step with the relevant code. Best if you're adding authentication to an existing application or want to understand each piece.
    • Code Snippets – Shows all code blocks together. Best for developers who want to copy and adapt quickly.
    • Clone Full Example – Links to a complete working project in the SecureAuth quickstart samples repository. Fastest path if you're building from scratch.

  6. Follow the instructions or copy the code into your application.

Your application configuration​

The Your App Configuration panel on the right side of the tab shows the values specific to your registered application.

The application configuration panel showing CLIENT ID, ISSUER URL, REDIRECT URI, POST-LOGOUT REDIRECT URI, SCOPES, GRANT, and a Copy as .env button

ValueDescription
Client IDIdentifies your application to SecureAuth. Think of it as a username for your application.
Issuer URLThe address of your SecureAuth workspace. Your application uses this to discover login endpoints and verify tokens.
Redirect URIWhere SecureAuth sends users after they successfully sign in. Must exactly match what you set when registering the application.
Post-Logout Redirect URIWhere SecureAuth sends users after they log out.
ScopesDefine what user information your application can access after sign-in (for example, profile data and email address).
GrantThe OAuth flow your application uses, determined by the application type you selected at registration.

Click Copy as .env to export all values as a .env file. Most frameworks load this file automatically in local development, keeping your configuration out of your source code.

Available frameworks​

The frameworks available in the Quickstart tab depend on your application type.

Application typeFrameworks
Single-page application (SPA)React, Angular, Vue
Server-side web application.NET, Java, Node.js
Native or mobile applicationReact Native

See also​