React SDK for Asgardeo
# Using npm
npm install @asgardeo/react
# or using pnpm
pnpm add @asgardeo/react
# or using yarn
yarn add @asgardeo/react- Add
<AsgardeoProvider />to your app
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { AsgardeoProvider } from '@asgardeo/react'
createRoot(document.getElementById('root')).render(
<StrictMode>
<AsgardeoProvider
baseUrl: '<your-organization-name>'
clientId: '<your-app-client-id>'
>
<App />
</AsgardeoProvider>
</StrictMode>
)- Add signed-in and signed-out to your app
import { SignedIn, SignedOut, SignInButton, SignOutButton } from '@asgardeo/react'
import './App.css'
function App() {
return (
<>
<SignedIn>
<SignOutButton />
</SignedIn>
<SignedOut>
<SignInButton />
</SignedOut>
</>
)
}
export default App- Start using other drop-in components like
User,UserProfile, etc.
import { User, UserProfile } from '@asgardeo/react'
import './App.css'
function App() {
return (
<>
<User>
{({ user }) => (
<div>
<h1>Welcome, {user.username}</h1>
<UserProfile />
</div>
)}
</User>
<UserProfile />
</>
)
}
export default AppFor more granular control, you can use the useAsgardeo hook. This hook provides direct access to SDK's functions and state:
import { useAsgardeo } from '@asgardeo/react'
import './App.css'
function App() {
const { user, signIn, signOut, isSignedIn, isLoading } = useAsgardeo()
if (isLoading) {
return <div>Loading...</div>
}
return (
<div>
{isSignedIn ? (
<div>
<div>
<img src={user.photourl} alt={user.username} />
<p>Welcome back, {user.givenname}</p>
</div>
<button onClick={() => signOut()}>Sign Out</button>
</div>
) : (
<button onClick={() => signIn()}>Sign In</button>
)}
</div>
)
}For complete API documentation including all components, hooks, and customization options, see API.md.
Licenses this source under the Apache License, Version 2.0 LICENSE, You may not use this file except in compliance with the License.