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 Thunder.

What You Will Learn

• Create new React app using Vite

• Install @asgardeo/react package

• Add user sign-in and sign-out

• Display user profile information

Prerequisites

• About 15 minutes

• Thunder running locally or on a server

• Node.js installed on your system

• A JavaScript package manager like npm, yarn, or pnpm

• A favorite text editor or IDE

Example Source Code

Check out the complete React Sample App in the Thunder repository

1

Create an Application in Thunder

Before integrating Thunder with your React app, you need to create an application in Thunder.

Using the Thunder Console

1. Sign into the Thunder Console at https://localhost:8090/develop
2. Navigate to Applications → New Application
3. Provide the following details:
   • Name: my-react-app
   • Type: Single Page Application (SPA)
   • Authorized Redirect URL: http://localhost:5173

info

The authorized redirect URL determines where Thunder should send users after they successfully log in. For this guide, we'll use http://localhost:5173, as the Vite development server runs at this URL by default.

Using the Thunder API

Alternatively, you can create an application using the Thunder API. First, obtain a system API token, then:

curl -kL -X POST https://localhost:8090/applications \
  -H 'Authorization: Bearer <your-system-token>' \
  -H 'Content-Type: application/json' \
  -d '{
    "name": "my-react-app",
    "inbound_auth_config": [{
      "type": "oauth2",
      "config": {
        "grant_types": ["authorization_code", "refresh_token"],
        "response_types": ["code"],
        "redirect_uris": ["http://localhost:5173"],
        "token_endpoint_auth_method": "none",
        "public_client": true,
        "pkce_required": true
      }
    }]
  }'

Important

Note down the Client ID from the response. You'll need it to configure your React app.

2

Create a React App

Create your new React app using Vite:

npm

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

yarn

yarn create vite my-react-app --template react
cd my-react-app
yarn install

pnpm

pnpm create vite my-react-app --template react
cd my-react-app
pnpm install

3

Install @asgardeo/react

Thunder uses the Asgardeo React SDK for authentication. Install it in your project:

npm

npm install @asgardeo/react

yarn

yarn add @asgardeo/react

pnpm

pnpm add @asgardeo/react

4

Add AsgardeoProvider to Your App

The <AsgardeoProvider /> serves as a context provider for the SDK. Integrate it by wrapping your root component.

Update the main.jsx file with the following:

src/main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { AsgardeoProvider } from '@asgardeo/react'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <AsgardeoProvider
      clientId="<your-client-id>"
      baseUrl="https://localhost:8090"
      platform="AsgardeoV2"
    >
      <App />
    </AsgardeoProvider>
  </StrictMode>
)

Configuration

Replace <your-client-id> with the Client ID you obtained when creating the application in Thunder.

Configuration Parameters

Parameter	Description
clientId	The Client ID from your Thunder application
baseUrl	Your Thunder instance URL (e.g., https://localhost:8090)
platform	Must be set to "AsgardeoV2" for Thunder

5

Add Sign-In and Sign-Out

The Asgardeo React SDK provides SignInButton and SignOutButton components along with SignedIn and SignedOut components for conditional rendering.

Replace the content of App.jsx with:

src/App.jsx

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

function App() {
  return (
    <>
      <Loading>
        <div>Loading authentication...</div>
      </Loading>

      <header>
        <h1>Thunder Auth Demo</h1>
        <SignedIn>
          <SignOutButton>Sign Out</SignOutButton>
        </SignedIn>
        <SignedOut>
          <SignInButton>Sign In</SignInButton>
        </SignedOut>
      </header>
    </>
  )
}

export default App

6

Display User Profile Information

Use the User component to access and display user profile information:

src/App.jsx

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

function App() {
  return (
    <>
      <Loading>
        <div>Loading authentication...</div>
      </Loading>

      <header>
        <h1>Thunder Auth Demo</h1>
        <SignedIn>
          <SignOutButton>Sign Out</SignOutButton>
        </SignedIn>
        <SignedOut>
          <SignInButton>Sign In</SignInButton>
        </SignedOut>
      </header>

      <main>
        <SignedIn>
          <User>
            {(user) => user && (
              <div className="user-profile">
                {user.picture && (
                  <img
                    src={user.picture}
                    alt={user.name || 'User avatar'}
                    style={{ width: '80px', height: '80px', borderRadius: '50%' }}
                  />
                )}
                <h2>Welcome, {user.name || user.username}!</h2>
                <div className="user-details">
                  <p><strong>Email:</strong> {user.email}</p>
                  <p><strong>First Name:</strong> {user.given_name}</p>
                  <p><strong>Last Name:</strong> {user.family_name}</p>
                </div>
              </div>
            )}
          </User>
        </SignedIn>
      </main>
    </>
  )
}

export default App

7

Run Your App

Start the development server:

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

Visit your app at http://localhost:5173

Success

You should now see the sign-in button. Click it to authenticate with Thunder!

Next Steps

Now that you have a basic Thunder authentication setup, you can:

• Protect Routes - Learn how to protect specific routes
• Access Protected APIs - Call Thunder's APIs with authentication
• Customize Login Flow - Create custom authentication experiences
• Explore SDK Components - Discover more pre-built components

Troubleshooting

Hook Error: "useAsgardeo must be used within AsgardeoProvider"

Ensure any component using useAsgardeo hook is a child of <AsgardeoProvider>

Infinite Redirect Loop

Verify that baseUrl and clientId are correct.

CORS Errors

Configure CORS settings in Thunder to allow your app's origin (http://localhost:5173)

Need Help?

Check out our troubleshooting guide or join our community.