Skip to content

React Quickstart

Welcome to the React Quickstart guide! In this document, you will learn to build a React app, add user login and display user profile information using WSO2 Identity Server.

What You Will Learn

  • Create new React app using Vite
  • Install @asgardeo/auth-react package
  • Add user login and logout
  • Display user profile information

Prerequisites

Before you start, ensure you have the following:
  • About 15 minutes
  • Set-up WSO2 Identity Server
  • Install Node.js on your system.
  • Make sure you have a JavaScript package manager like npm, yarn, or pnpm.
  • A favorite text editor or IDE

Example Source Code

React Vite App Sample

Configure an Application in WSO2 Identity Server

  • Sign into WSO2 Identity Server console and navigate to Applications > New Application.

  • Select Single Page Application and complete the wizard popup by providing a suitable name and an authorized redirect URL

  • Name - IS-React

  • Authorized redirect URL - http://localhost:5173

Info

The authorized redirect URL determines where WSO2 Identity Server 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 usehttp://localhost:5173, as the sample app will be accessible at this URL.

Note

Note down the following values : you will need them during the Step 4

  • client-id
  • base-url
  • redirect-url

Create a React app using Vite

Create (a.k.a scaffold) your new React app using Vite.

npm create vite@latest is-react -- --template react

cd is-react

npm install

npm run dev

yarn create vite@latest is-react -- --template react

cd is-react

yarn install

yarn dev

pnpm create vite@latest is-react -- --template react

cd is-react

pnpm install

pnpm dev

Install @asgardeo/auth-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. 

npm install @asgardeo/auth-react

yarn add @asgardeo/auth-react

pnpm add @asgardeo/auth-react

Info

Asgardeo-branded SDKs can be used to build apps to work with the all WSO2 identity suite of products that includes WSO2 Identity Server (WSO2 IS), WSO2 Private Identity Cloud (WSO2 PIC), and Asgardeo.

Add <AuthProvider /> to your app

The <AuthProvider /> serves as a context provider for user login in the app. You can add the AuthProvider to your app by wrapping the root component.

Add the following changes to the main.jsx file.

Important

Replace below placeholders with the generatedclient-id from the app you registered in WSO2 Identity Server.

  • <your-app-client-id>
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { AuthProvider } from '@asgardeo/auth-react'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <AuthProvider
      config={ {
        signInRedirectURL: 'http://localhost:5173',
        signOutRedirectURL: 'http://localhost:5173',
        clientID: '<your-app-client-id>',
        baseUrl: 'https://localhost:9443',
        scope: ['openid', 'profile'],
      } }
    >
      <App />
    </AuthProvider>
  </StrictMode>
)

Asgardeo React SDK provides useAuthContext hook to conveniently access user authentication data and sign-in and sign-out methods.

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

import { useAuthContext } from '@asgardeo/auth-react'
import './App.css'

function App() {
  const { state, signIn, signOut } = useAuthContext();

  return (
    <>
      {state.isAuthenticated ? (
        <button onClick={() => signOut()}>Logout</button>
      ) : (
        <button onClick={() => signIn()}>Login</button>
      )}
    </>
  )
}

export default App

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

Important

You need to create a test user in WSO2 Identity Server by following this guide to tryout login and logout features.

Display logged in user details

Modify the code as below to see logged in user details.

import { useAuthContext } from '@asgardeo/auth-react'
import './App.css'

function App() {
  const { state, signIn, signOut } = useAuthContext();

  return (
    <>
      {state.isAuthenticated ? (
        <>
          <p>Welcome {state.username}</p>
          <button onClick={() => signOut()}>Logout</button>
        </>
      ) : (
        <button onClick={() => signIn()}>Login</button>
      )}
    </>
  )
}

export default App

What's Next?