Skip to content

Commit eac6c23

Browse files
Remove staging from spacetimeauth docs and update react integration (#3347)
# Description of Changes In the React Integration tutorial - Replace the staging URL by the production one - Add useAutoSignin to automatically redirect users to the login page - Add post_logout_redirect_uri to redirect users back to the application after login # API and ABI breaking changes None. # Expected complexity level and risk 1 # Testing Local test
1 parent b84adee commit eac6c23

File tree

1 file changed

+39
-2
lines changed

1 file changed

+39
-2
lines changed

docs/docs/spacetimeauth/react-integration.md

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,10 @@ SpacetimeAuth dashboard.
2727

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

124125
```
125126

127+
### 4. Implement Authentication Logic in Your App
128+
129+
In your main component (e.g., `App.tsx`), use the `useAutoSignin` hook to automatically
130+
sign in users if they are not authenticated.
131+
132+
```tsx
133+
import React from 'react';
134+
import { useAuth, useAutoSignin } from 'react-oidc-context';
135+
import './App.css';
136+
function App() {
137+
const auth = useAuth();
138+
useAutoSignin();
139+
140+
if (auth.isLoading) {
141+
return <div>Loading...</div>;
142+
}
143+
144+
if (auth.error) {
145+
return <div>Error: {auth.error.message}</div>;
146+
}
147+
148+
if (!auth.isAuthenticated) {
149+
return <div>Redirecting to login...</div>;
150+
}
151+
152+
return (
153+
<div className="App">
154+
<header className="App-header">
155+
Welcome, {auth.user?.profile.name} (id: {auth.user?.profile.sub})!
156+
<button onClick={() => auth.signoutRedirect()}>Sign Out</button>
157+
</header>
158+
</div>
159+
);
160+
}
161+
126162
You're now set up to use SpacetimeAuth in your React application. When users
127163
access your app, they will be redirected to the SpacetimeAuth login page for authentication.
164+
```

0 commit comments

Comments
 (0)