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 Asgardeo console and navigate to Applications > New Application.
• Select React and complete the wizard popup by providing a suitable name and an authorized redirect URL.

Example

Name: asgardeo-react

Authorized redirect URL: http://localhost:5173

Note down the following values from the Guide tab of the registered application. You will need them to configure Asgardeo React SDK.

• Client ID - The unique identifier for your application.
• Base URL - The base URL for your Asgardeo organization. This will be typically in 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 (a.k.a scaffold) your new React app using Vite.

npmyarnpnpm

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 started in the previous step.

npmyarnpnpm

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

The SDK provides several ways to access the 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 [//] SHOW_IF="data-quickstart=redirect,data-quickstart=embedded"

To run the app, use the following command:

npmyarnpnpm

npm run dev

yarn dev

pnpm dev

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

Important

You need to create a test user in Asgardeo by following this guide to tryout sign-in and sign-out features.

[//] STEPS_END