Skip to content

Commit 25ba82b

Browse files
authored
add section about passing data through authentication flows to README (#56)
1 parent 6ebc284 commit 25ba82b

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed

README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,3 +116,46 @@ The following claims may be populated if the user is part of an organization:
116116
- `organizationId`: The currently-selected organization.
117117
- `role`: The `role` of the user for the current organization.
118118
- `permissions`: Permissions corresponding to this role.
119+
120+
## Passing Data Through Authentication Flows
121+
122+
When building authentication flows, you often need to maintain state across redirects. For example, you might want to return users to the page they were viewing before login or preserve other application state. AuthKit provides a way to pass and retrieve data through the authentication process.
123+
124+
### Using `state`
125+
126+
`state` is used to pass data that you need to retrieve after authentication completes
127+
128+
```tsx
129+
// When signing in, pass your data using the state parameter
130+
function LoginButton() {
131+
return (
132+
<button
133+
onClick={() => {
134+
signIn({ state: { returnTo: "/dashboard" } });
135+
}}
136+
>
137+
Sign in
138+
</button>
139+
);
140+
}
141+
142+
// Then retrieve your data in the onRedirectCallback
143+
function App() {
144+
return (
145+
<AuthKitProvider
146+
clientId="client_123"
147+
apiHostname="auth.example.com"
148+
onRedirectCallback={(state) => {
149+
// Access your data here
150+
if (state?.returnTo) {
151+
window.location.href = state.returnTo;
152+
}
153+
}}
154+
>
155+
<YourApp />
156+
</AuthKitProvider>
157+
);
158+
}
159+
```
160+
161+
This pattern works with both `signIn` and `signUp` functions.

0 commit comments

Comments
 (0)