Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 39 additions & 2 deletions docs/docs/spacetimeauth/react-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,10 @@ SpacetimeAuth dashboard.

```tsx
const oidcConfig = {
authority: 'https://spacetimeauth.staging.spacetimedb.com/oidc',
authority: 'https://auth.spacetimedb.com/oidc',
client_id: 'YOUR_CLIENT_ID',
redirect_uri: `${window.location.origin}/callback`,
redirect_uri: `${window.location.origin}/callback`, // Where the user is redirected after login
post_logout_redirect_uri: window.location.origin, // Where the user is redirected after logout
scope: 'openid profile email',
response_type: 'code',
automaticSilentRenew: true,
Expand Down Expand Up @@ -123,5 +124,41 @@ root.render(

```

### 4. Implement Authentication Logic in Your App

In your main component (e.g., `App.tsx`), use the `useAutoSignin` hook to automatically
sign in users if they are not authenticated.

```tsx
import React from 'react';
import { useAuth, useAutoSignin } from 'react-oidc-context';
import './App.css';
function App() {
const auth = useAuth();
useAutoSignin();

if (auth.isLoading) {
return <div>Loading...</div>;
}

if (auth.error) {
return <div>Error: {auth.error.message}</div>;
}

if (!auth.isAuthenticated) {
return <div>Redirecting to login...</div>;
}

return (
<div className="App">
<header className="App-header">
Welcome, {auth.user?.profile.name} (id: {auth.user?.profile.sub})!
<button onClick={() => auth.signoutRedirect()}>Sign Out</button>
</header>
</div>
);
}

You're now set up to use SpacetimeAuth in your React application. When users
access your app, they will be redirected to the SpacetimeAuth login page for authentication.
```
Loading