Skip to content

React Quickstart

Welcome to the React Quickstart guide! In this document, you will learn to build a React app, add user sign-in and display user profile information using Asgardeo.

[//] STEPS_START

Configure an Application in Asgardeo

  • Sign into the Asgardeo Console and navigate to Applications > New Application.
  • Select React and complete the wizard by providing a suitable name and an authorized redirect URL.

Example

Name: asgardeo-react

Authorized redirect URL: http://localhost:5173

Once you finish creating the application, note down the following values from its Guide tab. You will need them to configure Asgardeo React SDK.

  • Client ID - The unique identifier for your application.
  • Base URL - The base URL of your Asgardeo organization. This typically follows the format https://api.asgardeo.io/t/<your-organization-name>

Info

The authorized redirect URL determines where Asgardeo should send users after they successfully log in. Typically, this will be the web address where your app is hosted. For this guide, we'll use http://localhost:5173, as the sample app will be accessible at this URL.

Create a React app using Vite

Create (scaffold) your new React app using Vite.

npm create vite@latest asgardeo-react -- --template react
cd asgardeo-react
npm install
npm run dev

yarn create vite@latest asgardeo-react -- --template react
cd asgardeo-react
yarn install
yarn dev

pnpm create vite@latest asgardeo-react -- --template react
cd asgardeo-react
pnpm install
pnpm dev

Install @asgardeo/react

Asgardeo React SDK provides all the components and hooks you need to integrate Asgardeo into your app. To get started, simply add the Asgardeo React SDK to the project. Make sure to stop the dev server you started in the previous step.

npm install @asgardeo/react

yarn add @asgardeo/react

pnpm add @asgardeo/react

Add <AsgardeoProvider /> to your app

The <AsgardeoProvider /> serves as a context provider for the SDK. You can integrate this provider to your app by wrapping the root component.

Add the following changes to the main.jsx file.

Important

Replace below placeholders with your registered organization name in Asgardeo and the generated client-id from the app you registered in Asgardeo.

  • <your-app-client-id>
  • https://api.asgardeo.io/t/<your-organization-name>
src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { AsgardeoProvider } from '@asgardeo/react'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <AsgardeoProvider
      clientId="<your-app-client-id>"
      baseUrl="https://api.asgardeo.io/t/<your-organization-name>"
    >
      <App />
    </AsgardeoProvider>
  </StrictMode>
)

Add sign-in and sign-out to your app

Asgardeo SDK provides SignInButton, SignOutButton components to handle user sign-in and sign-out. You can use these components along side SignedIn and SignedOut components to conditionally render content based on the user's logged in state.

Replace the existing content of the App.jsx file with following content.

src/App.jsx
import { SignedIn, SignedOut, SignInButton, SignOutButton } from '@asgardeo/react'
import './App.css'

function App() {
  return (
    <header>
      <SignedIn>
        <SignOutButton />
      </SignedIn>
      <SignedOut>
        <SignInButton />
      </SignedOut>
    </header>
  )
}

export default App

Display signed-in user's profile information

You can use the User, UserProfile, or UserDropdown components to access and display user profile information in a declarative way.

  • User: The User component provides a render prop pattern to access user profile information:
  • UserProfile: The UserProfile component provides a declarative way to display and update user profile information.
  • UserDropdown: The UserDropdown component provides a dropdown menu with built-in user information and sign-out functionality.
src/App.jsx
import { SignedIn, SignedOut, SignInButton, SignOutButton, User, UserDropdown, UserProfile } from '@asgardeo/react'
import './App.css'

function App() {
  return (
    <>
      <header>
        <SignedIn>
          <UserDropdown />
          <SignOutButton />
        </SignedIn>
        <SignedOut>
          <SignInButton />
        </SignedOut>
      </header>
      <main>
        <SignedIn>
          <User>
            {(user) => (
              <div>
                <p>Welcome back, {user.userName || user.username || user.sub}</p>
              </div>
            )}
          </User>
          <UserProfile />
        </SignedIn>
      </main>
    </>
  )
}

export default App

Run the app

To run the app, use the following command:

npm run dev

yarn dev

pnpm dev

Visit your app's homepage at http://localhost:5173.

Important

To try out sign-in and sign-out features, create a test user in Asgardeo by following this guide.

[//] STEPS_END