React sample SPA


# React sample SPA

By following this guide, you will be able to deploy a React single-page application locally and secure it with OpenID Connect.

# Prerequisites

# Register the app

Follow the steps given below to register the sample React SPA in Asgardeo.

  1. On the Asgardeo Console (opens new window), go to Applications.

  2. Click New Application and select Single-Page Application

  3. Enter the following details:

    Create a new SPA
    Name Give a unique name to identify your application.
    Authorized redirect URLs

    The URL to which the user is redirect to after a successful login. Use the following URL for this sample app:

    https://localhost:3000
    Allow sharing with sub-organizations Enable this to share the new application with all or any selected suborganizations that belong to your root organization.
  4. Click Register to complete the registration.

  5. Go to the Protocol tab and take note of the Client ID. You will need it to configure the application later.

    Client ID

To provide a better experience for the user, it is recommended to configure an access URL for the application. You can set an access URL for the application from the General tab. (For this sample application, the access URL is https://localhost:3000).

Why do we recommend this?
  • It will be used in the application catalog and discovery flows.
  • We will use it to redirect the user back to the application in the following scenarios.
    • If the login page times out
    • After a password reset
    • After self sign-up verification
  • If the login flow is failed, we will provide an option for the user to re-initiate the login flow using this URL.

# Download the sample

Click the button below to download the sample. You can also choose to view the source before doing so.

# Configure the sample

Follow the steps given below to configure the sample app.

  1. Unzip the application folder.

  2. Go to the asgardeo-react-app/src/ folder and open the config.json file in a text editor.

  3. Update the following in the config.json file:

    Replace {organization_name} with the name of your organization and apply the client ID that was generated when you registered the application in Asgardeo.

    {
        "clientID": "{client ID}",
        "baseUrl": "https://api.asgardeo.io/t/{organization_name}",
        "signInRedirectURL": "https://localhost:3000",
        "signOutRedirectURL": "https://localhost:3000",
        "scope": [ "profile" ]
    }
    
    1
    2
    3
    4
    5
    6
    7
    Configuration Description
    clientID The client id that you received when you registered the application in Asgardeo.
    baseUrl

    All authentication requests that the client application makes to Asgardeo will be appended to this base URL.:

    https://api.asgardeo.io/t/{organization_name}
    scope

    The list of OIDC scopes that are used for requesting user information. You can add OIDC scopes such as profile and email in a comma-separated list as follows:

    "scope": ["profile", "email"]

    Learn more about OIDC scopes in Asgardeo.

# Run the sample

Follow the steps given below to run the sample.

  1. On your terminal, navigate to the root of the project and run the command given below to start the sample application:

    npm install && npm start
    
    1
  2. Once the app is successfully compiled, it is accessible at https://localhost:3000.

    React SPA login
  3. Click Login. You will be redirected to the Asgardeo login page.

    Asgardeo Sign in page
  4. Enter the credentials of your user account and click Sign In.

    Extend your login session

    By default, the user login session is active for only 15 minutes. You can extend the session to 14 days by selecting the Remember me on this computer option provided at the login screen of your application.