Follow this guide to try out the sample app curated by Asgardeo. If you want to integrate Asgardeo for your own app, follow this guide.
- Create an Application in Asgardeo
- Running the sample apps
- Change the Application's Development Server Port
- Other Links
Before trying out the sample apps, you need to create an application in Asgardeo.
-
Open the Asgardeo Console and go to the Applications > Develop tab.
-
Click New Application and then Single Page Application.
-
Enter any name you prefer as the name of the app.
-
Add the redirect URL(s). For local environments, it will be something like
https://localhost:3000
. This will be used as a configuration in Running the sample apps section.Note The redirect URL usually is the URL in which your React application is hosted.
-
Click Register. You will be navigated to the management page of the sample application.
-
In the Quick Start tab, select React as the preferred technology.
-
Since we are using a sample app, select Try out a sample option and follow the guide.
Follow the steps given below to run the sample:
-
In the Quick Start guide, download the sample React application from the given link on the Asgardeo Console.
-
Update the
src/config.json
configuration file with your registered app details.{ "clientID": "", "baseUrl": "https://api.asgardeo.io/t/<org_name>", "signInRedirectURL": "https://localhost:3000", "signOutRedirectURL": "https://localhost:3000", "scope": [ "openid","profile" ] }
Attribute Description "clientID"
The Client ID of your OIDC app. "baseUrl"
Asgardeo server's host name along with your organization name. "signInRedirectURL"
The URL to which the sample app redirects to after user login. "signOutRedirectURL"
The URL which the sample app redirects to after user logout "scope"
The list of OIDC scopes that are used for requesting user information. The openid
scope is mandatory to get the ID token. You can add other OIDC scopes such asprofile
andemail
. -
Build and deploy the apps by running the following command at the root directory.
npm install && npm start
-
Go to
https://localhost:3000
(or to the relevant URL you have hosted the sample app) on your browser.
By default, the development server runs on port 3000
. If you wish to change this to something else,
follow the steps below.
- Update the
PORT
in the .env file in the app root. - Update the
signInRedirectURL
andsignOutRedirectURL
parameters in src/config.json. - Go to the Asgardeo Console, navigate to the Protocol tab of your application, and do the following:
- Update the Authorized Redirect URL.
- Update the Allowed Origins.
-
Download samples/asgardeo-react-app
-
Find More Info:
-
Redirect URL(s):
https://localhost:3000