Skip to content

Commit

Permalink
Merge pull request #889 from supertokens/add-react-router-callout
Browse files Browse the repository at this point in the history 
Add info on a separate react-router use case
  • Loading branch information
@bcbogdan
bcbogdan authored Jan 6, 2025
2 parents 7ee6afb + 034e977 commit 8d6895e
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 90 deletions.
37 changes: 37 additions & 0 deletions v3/docs/_blocks/react-router-callout.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@

:::important
If you are using `useRoutes`, `createBrowserRouter` or have routes defined in a different file, you need to adjust the code sample.
Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
```tsx
import React from 'react';

import { BrowserRouter, useRoutes } from "react-router-dom";
import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
import * as reactRouterDom from "react-router-dom";

function AppRoutes() {
const authRoutes = getSuperTokensRoutesForReactRouterDom(
reactRouterDOM,
[/* Add your UI recipes here e.g. EmailPasswordPrebuiltUI, PasswordlessPrebuiltUI, ThirdPartyPrebuiltUI */]
);

const routes = useRoutes([
...authRoutes.map(route => route.props),
// Include the rest of your app routes
]);

return routes;
}

function App() {
return (
<SuperTokensWrapper>
<BrowserRouter>
<AppRoutes />
</BrowserRouter>
</SuperTokensWrapper>
);
}
```
:::
41 changes: 2 additions & 39 deletions v3/docs/authentication/passwordless/initial-setup.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ import {
FrontendPrebuiltUITabs,
BackendTabs,
FrontendCustomUITabs,
ReactRouterVersionTabs,
} from "/src/components/Tabs";
import { AppInfoForm } from "/src/components/AppInfoForm";
import { NodePackageManagerCard, PasswordlessConfigCard, JavascriptHttpLibraryCard, NpmOrScriptsCard, MobileFrameworksCard } from "/src/components/Cards";
import { Question, Answer } from "/src/components/Question";
import { ReferenceCard } from "/src/components/Cards";

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

<Question question="Do you use react-router-dom?" defaultAnswer="Yes">
<Answer title="Yes">
<ReactRouterVersionTabs>
<ReactRouterVersionTabs.Tab value="v6">
```tsx
import React from 'react';
import {
Expand Down Expand Up @@ -133,44 +131,9 @@ class App extends React.Component {
}
}
```
</ReactRouterVersionTabs.Tab>

<ReactRouterVersionTabs.Tab value="v5">
```tsx
import React from 'react';
import {
BrowserRouter,
Switch,
Route,
Link
} from "react-router-dom5";

// highlight-next-line
import { PasswordlessPreBuiltUI } from 'supertokens-auth-react/recipe/passwordless/prebuiltui';
import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
import * as reactRouterDom from "react-router-dom";

class App extends React.Component {
render() {
return (
<SuperTokensWrapper>
<BrowserRouter>
<Switch>
{/*This renders the login UI on the ^{appInfo.websiteBasePath} route*/}
// highlight-next-line
{getSuperTokensRoutesForReactRouterDom(reactRouterDom, [PasswordlessPreBuiltUI])}
{/*Your app routes*/}
</Switch>
</BrowserRouter>
</SuperTokensWrapper>
);
}
}
```
<ReactRouterCallout />

</ReactRouterVersionTabs.Tab>
</ReactRouterVersionTabs>
</Answer>
<Answer title="No">

Expand Down
41 changes: 2 additions & 39 deletions v3/docs/authentication/social/initial-setup.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { NodePackageManagerCard, PasswordlessConfigCard, JavascriptHttpLibraryCa
import { Question, Answer } from "/src/components/Question";
import { ReferenceCard } from "/src/components/Cards";

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

<Question question="Do you use react-router-dom?" defaultAnswer="Yes">
<Answer title="Yes">
<ReactRouterVersionTabs>
<ReactRouterVersionTabs.Tab value="v6">
```tsx
import React from 'react';
import {
Expand Down Expand Up @@ -141,44 +140,8 @@ class App extends React.Component {
}
}
```
</ReactRouterVersionTabs.Tab>

<ReactRouterVersionTabs.Tab value="v5">
```tsx
import React from 'react';
import {
BrowserRouter,
Switch,
Route,
Link
} from "react-router-dom5";

// highlight-next-line
import { ThirdPartyPreBuiltUI } from 'supertokens-auth-react/recipe/thirdparty/prebuiltui';
import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
import * as reactRouterDom from "react-router-dom";

class App extends React.Component {
render() {
return (
<SuperTokensWrapper>
<BrowserRouter>
<Switch>
{/*This renders the login UI on the ^{appInfo.websiteBasePath} route*/}
// highlight-next-line
{getSuperTokensRoutesForReactRouterDom(reactRouterDom, [ThirdPartyPreBuiltUI])}
{/*Your app routes*/}
</Switch>
</BrowserRouter>
</SuperTokensWrapper>
);
}
}
```

</ReactRouterVersionTabs.Tab>
</ReactRouterVersionTabs>
<ReactRouterCallout />
</Answer>
<Answer title="No">

Expand Down
18 changes: 6 additions & 12 deletions v3/docs/quickstart/frontend-setup.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ import { UIType } from "/src/components/UITypeSwitch";
import {
FrontendPrebuiltUITabs,
FrontendCustomUITabs,
ReactRouterVersionTabs,
} from "/src/components/Tabs";
import { AppInfoForm } from "/src/components/AppInfoForm";
import { NodePackageManagerCard, JavascriptHttpLibraryCard, NpmOrScriptsCard, MobileFrameworksCard } from "/src/components/Cards";
import { Question, Answer } from "/src/components/Question";

import ReactRouterCallout from "/docs/_blocks/react-router-callout.mdx";

import ReactSDKInit from "./_blocks/react-sdk-init.mdx";
import ReactRouterV6 from "./_blocks/react-router-v6.mdx";
import ReactRouterV5 from "./_blocks/react-router-v5.mdx";
import ReactNoRouter from "./_blocks/react-no-router.mdx";
import AngularAuthComponent from "./_blocks/angular-auth-component.mdx";
import AngularAppComponent from "./_blocks/angular-auth-component.mdx";
Expand All @@ -37,6 +37,7 @@ import VanillaJSNpmSignIn from "./_blocks/vanilla-js-npm-sign-in.mdx";
import VanillaJSScriptsSignIn from "./_blocks/vanilla-js-script-sign-in.mdx";
import CurlSignIn from "./_blocks/curl-sign-in.mdx";


# Frontend Setup

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

<Question question="Do you use react-router-dom?" defaultAnswer="Yes">
<Answer title="Yes">
<ReactRouterVersionTabs>
<ReactRouterVersionTabs.Tab value="v6">
Call the `getSuperTokensRoutesForReactRouterDom` method from within any `react-router-dom` `Routes` component.
<ReactRouterV6 />
</ReactRouterVersionTabs.Tab>
<ReactRouterVersionTabs.Tab value="v5">
Call the `getSuperTokensRoutesForReactRouterDom` method from within any `react-router-dom` `Switch` component.
<ReactRouterV5 />
</ReactRouterVersionTabs.Tab>
</ReactRouterVersionTabs>
Call the `getSuperTokensRoutesForReactRouterDom` method from within any `react-router-dom` `Routes` component.
<ReactRouterV6 />
<ReactRouterCallout />
</Answer>
<Answer title="No">
Add the highlighted code snippet to your root level `render` function.
Expand Down

0 comments on commit 8d6895e

Please sign in to comment.