Skip to content

Commit 8d6895e

Browse files
bcbogdanbcbogdan
authored
Merge pull request #889 from supertokens/add-react-router-callout
Add info on a separate react-router use case
2 parents 7ee6afb + 034e977 commit 8d6895e

File tree

4 files changed

+47
-90
lines changed

4 files changed

+47
-90
lines changed

‎v3/docs/_blocks/react-router-callout.mdx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
2+
:::important
3+
If you are using `useRoutes`, `createBrowserRouter` or have routes defined in a different file, you need to adjust the code sample.
4+
Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
5+
```tsx
6+
import React from 'react';
7+
8+
import { BrowserRouter, useRoutes } from "react-router-dom";
9+
import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
10+
import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
11+
import * as reactRouterDom from "react-router-dom";
12+
13+
function AppRoutes() {
14+
const authRoutes = getSuperTokensRoutesForReactRouterDom(
15+
reactRouterDOM,
16+
[/* Add your UI recipes here e.g. EmailPasswordPrebuiltUI, PasswordlessPrebuiltUI, ThirdPartyPrebuiltUI */]
17+
);
18+
19+
const routes = useRoutes([
20+
...authRoutes.map(route => route.props),
21+
// Include the rest of your app routes
22+
]);
23+
24+
return routes;
25+
}
26+
27+
function App() {
28+
return (
29+
<SuperTokensWrapper>
30+
<BrowserRouter>
31+
<AppRoutes />
32+
</BrowserRouter>
33+
</SuperTokensWrapper>
34+
);
35+
}
36+
```
37+
:::

‎v3/docs/authentication/passwordless/initial-setup.mdx‎

Lines changed: 2 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ import {
1111
FrontendPrebuiltUITabs,
1212
BackendTabs,
1313
FrontendCustomUITabs,
14-
ReactRouterVersionTabs,
1514
} from "/src/components/Tabs";
1615
import { AppInfoForm } from "/src/components/AppInfoForm";
1716
import { NodePackageManagerCard, PasswordlessConfigCard, JavascriptHttpLibraryCard, NpmOrScriptsCard, MobileFrameworksCard } from "/src/components/Cards";
1817
import { Question, Answer } from "/src/components/Question";
1918
import { ReferenceCard } from "/src/components/Cards";
2019

20+
import ReactRouterCallout from "/docs/_blocks/react-router-callout.mdx";
2121
import FrontendCustomUIMagicLinkUI from "./_blocks/frontend-custom-ui-magic-link-ui.mdx"
2222
import FrontendCustomUIOtpUI from "./_blocks/frontend-custom-ui-otp-ui.mdx"
2323
import BackendSDKInit from "./_blocks/backend-sdk-init.mdx"
@@ -99,8 +99,6 @@ Based on whether you already use this package or not in your project, there are
9999

100100
<Question question="Do you use react-router-dom?" defaultAnswer="Yes">
101101
<Answer title="Yes">
102-
<ReactRouterVersionTabs>
103-
<ReactRouterVersionTabs.Tab value="v6">
104102
```tsx
105103
import React from 'react';
106104
import {
@@ -133,44 +131,9 @@ class App extends React.Component {
133131
}
134132
}
135133
```
136-
</ReactRouterVersionTabs.Tab>
137134

138-
<ReactRouterVersionTabs.Tab value="v5">
139-
```tsx
140-
import React from 'react';
141-
import {
142-
BrowserRouter,
143-
Switch,
144-
Route,
145-
Link
146-
} from "react-router-dom5";
147-
148-
// highlight-next-line
149-
import { PasswordlessPreBuiltUI } from 'supertokens-auth-react/recipe/passwordless/prebuiltui';
150-
import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
151-
import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
152-
import * as reactRouterDom from "react-router-dom";
153-
154-
class App extends React.Component {
155-
render() {
156-
return (
157-
<SuperTokensWrapper>
158-
<BrowserRouter>
159-
<Switch>
160-
{/*This renders the login UI on the ^{appInfo.websiteBasePath} route*/}
161-
// highlight-next-line
162-
{getSuperTokensRoutesForReactRouterDom(reactRouterDom, [PasswordlessPreBuiltUI])}
163-
{/*Your app routes*/}
164-
</Switch>
165-
</BrowserRouter>
166-
</SuperTokensWrapper>
167-
);
168-
}
169-
}
170-
```
135+
<ReactRouterCallout />
171136

172-
</ReactRouterVersionTabs.Tab>
173-
</ReactRouterVersionTabs>
174137
</Answer>
175138
<Answer title="No">
176139

‎v3/docs/authentication/social/initial-setup.mdx‎

Lines changed: 2 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { NodePackageManagerCard, PasswordlessConfigCard, JavascriptHttpLibraryCa
1818
import { Question, Answer } from "/src/components/Question";
1919
import { ReferenceCard } from "/src/components/Cards";
2020

21+
import ReactRouterCallout from "/docs/_blocks/react-router-callout.mdx";
2122
import FrontendCustomUIMobileAccessTokenFlow from "./_blocks/frontend-custom-ui-mobile-access-token-flow.mdx"
2223
import FrontendCustomUIMobileAuthorizationCodeFlow from "./_blocks/frontend-custom-ui-mobile-authorization-code-flow.mdx"
2324
import FrontendCustomUIWebAuthorizationCodeFlow from "./_blocks/frontend-custom-ui-web-authorization-code-flow.mdx"
@@ -107,8 +108,6 @@ Based on whether you already use this package or not in your project, there are
107108

108109
<Question question="Do you use react-router-dom?" defaultAnswer="Yes">
109110
<Answer title="Yes">
110-
<ReactRouterVersionTabs>
111-
<ReactRouterVersionTabs.Tab value="v6">
112111
```tsx
113112
import React from 'react';
114113
import {
@@ -141,44 +140,8 @@ class App extends React.Component {
141140
}
142141
}
143142
```
144-
</ReactRouterVersionTabs.Tab>
145143

146-
<ReactRouterVersionTabs.Tab value="v5">
147-
```tsx
148-
import React from 'react';
149-
import {
150-
BrowserRouter,
151-
Switch,
152-
Route,
153-
Link
154-
} from "react-router-dom5";
155-
156-
// highlight-next-line
157-
import { ThirdPartyPreBuiltUI } from 'supertokens-auth-react/recipe/thirdparty/prebuiltui';
158-
import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
159-
import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
160-
import * as reactRouterDom from "react-router-dom";
161-
162-
class App extends React.Component {
163-
render() {
164-
return (
165-
<SuperTokensWrapper>
166-
<BrowserRouter>
167-
<Switch>
168-
{/*This renders the login UI on the ^{appInfo.websiteBasePath} route*/}
169-
// highlight-next-line
170-
{getSuperTokensRoutesForReactRouterDom(reactRouterDom, [ThirdPartyPreBuiltUI])}
171-
{/*Your app routes*/}
172-
</Switch>
173-
</BrowserRouter>
174-
</SuperTokensWrapper>
175-
);
176-
}
177-
}
178-
```
179-
180-
</ReactRouterVersionTabs.Tab>
181-
</ReactRouterVersionTabs>
144+
<ReactRouterCallout />
182145
</Answer>
183146
<Answer title="No">
184147

‎v3/docs/quickstart/frontend-setup.mdx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ import { UIType } from "/src/components/UITypeSwitch";
99
import {
1010
FrontendPrebuiltUITabs,
1111
FrontendCustomUITabs,
12-
ReactRouterVersionTabs,
1312
} from "/src/components/Tabs";
1413
import { AppInfoForm } from "/src/components/AppInfoForm";
1514
import { NodePackageManagerCard, JavascriptHttpLibraryCard, NpmOrScriptsCard, MobileFrameworksCard } from "/src/components/Cards";
1615
import { Question, Answer } from "/src/components/Question";
1716

17+
import ReactRouterCallout from "/docs/_blocks/react-router-callout.mdx";
18+
1819
import ReactSDKInit from "./_blocks/react-sdk-init.mdx";
1920
import ReactRouterV6 from "./_blocks/react-router-v6.mdx";
20-
import ReactRouterV5 from "./_blocks/react-router-v5.mdx";
2121
import ReactNoRouter from "./_blocks/react-no-router.mdx";
2222
import AngularAuthComponent from "./_blocks/angular-auth-component.mdx";
2323
import AngularAppComponent from "./_blocks/angular-auth-component.mdx";
@@ -37,6 +37,7 @@ import VanillaJSNpmSignIn from "./_blocks/vanilla-js-npm-sign-in.mdx";
3737
import VanillaJSScriptsSignIn from "./_blocks/vanilla-js-script-sign-in.mdx";
3838
import CurlSignIn from "./_blocks/curl-sign-in.mdx";
3939

40+
4041
# Frontend Setup
4142

4243
Start the setup by configuring your frontend application to use **SuperTokens** for authentication.
@@ -208,16 +209,9 @@ Run the following command in your terminal to install the package.
208209

209210
<Question question="Do you use react-router-dom?" defaultAnswer="Yes">
210211
<Answer title="Yes">
211-
<ReactRouterVersionTabs>
212-
<ReactRouterVersionTabs.Tab value="v6">
213-
Call the `getSuperTokensRoutesForReactRouterDom` method from within any `react-router-dom` `Routes` component.
214-
<ReactRouterV6 />
215-
</ReactRouterVersionTabs.Tab>
216-
<ReactRouterVersionTabs.Tab value="v5">
217-
Call the `getSuperTokensRoutesForReactRouterDom` method from within any `react-router-dom` `Switch` component.
218-
<ReactRouterV5 />
219-
</ReactRouterVersionTabs.Tab>
220-
</ReactRouterVersionTabs>
212+
Call the `getSuperTokensRoutesForReactRouterDom` method from within any `react-router-dom` `Routes` component.
213+
<ReactRouterV6 />
214+
<ReactRouterCallout />
221215
</Answer>
222216
<Answer title="No">
223217
Add the highlighted code snippet to your root level `render` function.

0 commit comments

Comments
 (0)