Skip to content

Commit

Permalink
Merge pull request #756 from supertokens/feat/add-get-redirection-url…
Browse files Browse the repository at this point in the history 
…-docs

feat: Add getRedirectionURL docs
  • Loading branch information
@rishabhpoddar
rishabhpoddar authored Dec 11, 2023
2 parents 9bd1b72 + def279c commit 9dbabbe
Show file tree
Hide file tree
Showing 20 changed files with 918 additions and 134 deletions.
4 changes: 2 additions & 2 deletions v2/emailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import TabItem from '@theme/TabItem';

# Redirection Callback Hook

This function is used to change where the user is redirected to post certain actions. For example, you can use this to redirect a user to a specific URL post sign in / up.
This function is used to change where the user is redirected to post certain actions. For example, you can use this to redirect a user to a specific URL post sign in / up. If you're embedding the sign in / up components in a popup and wish to disable redirection entirely, simply return `null`.

<FrontendSDKTabs>
<TabItem value="reactjs">
Expand All @@ -28,7 +28,7 @@ EmailPassword.init({
// we are navigating back to where the user was before they authenticated
return redirectToPath;
}
if (context.isNewRecipeUser && context.user.loginMethods.length === 1) {
if (context.isNewPrimaryUser) {
// user signed up
return "/onboarding"
} else {
Expand Down
186 changes: 177 additions & 9 deletions v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,25 @@
id: embed-sign-in-up-form
title: Embed Sign In / Up form in a page
hide_title: true
show_ui_switcher: true
---

import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs"
import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs"
import TabItem from '@theme/TabItem';
import {Question, Answer}from "/src/components/question"
import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"

# Embed Sign In / Up form in a page

<PreBuiltOrCustomUISwitcher>

<PreBuiltUIContent>

## Step 1: Disable default implementation

This will prevent SuperTokens from displaying the default login UI in the `/auth` page.

<FrontendSDKTabs>
<FrontendPreBuiltUITabs>
<TabItem value="reactjs">

```tsx
Expand All @@ -40,16 +47,123 @@ SuperTokens.init({
});
```
</TabItem>
</FrontendSDKTabs>
</FrontendPreBuiltUITabs>

If you navigate to `/auth`, you should not see the widget anymore.

## Step 2: Render the component yourself

For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only of the user is logged in, then we can:
For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only if the user is logged in, then we can:

<FrontendSDKTabs>
<FrontendPreBuiltUITabs>
<TabItem value="reactjs">
<Question
question="Do you use react-router-dom?">
<Answer title="Yes">

<RRDVersionSubTabs>

<TabItem value="v6">

```tsx
import React from "react";
// highlight-start
import { SignInAndUp } from 'supertokens-auth-react/recipe/emailpassword/prebuiltui';
import Session from "supertokens-auth-react/recipe/session";
// highlight-end
// @ts-ignore
import Header from "./header";
// @ts-ignore
import Footer from "./footer";
import { useNavigate } from "react-router-dom";

function MyLandingPage() {
let sessionContext = Session.useSessionContext();
const navigate = useNavigate();
if (sessionContext.loading) {
return null;
}
if (sessionContext.doesSessionExist) {
// We wrap this with <SessionAuth /> so that
// all claims are validated before showing the logged in UI.
// For example, if email verification is switched on, and
// the user's email is not verified, then <SessionAuth />
// will redirect to the email verification page.
return (
<Session.SessionAuth>
<Header />
You are logged in!
<Footer />
</Session.SessionAuth>
)
} else {
return (
<div>
<Header />
// highlight-next-line
<SignInAndUp navigate={navigate} />
<Footer />
</div>
)
}
}
```

</TabItem>

<TabItem value="v5">

```tsx
import React from "react";
// highlight-start
import { SignInAndUp } from 'supertokens-auth-react/recipe/emailpassword/prebuiltui';
import Session from "supertokens-auth-react/recipe/session";
// highlight-end
// @ts-ignore
import Header from "./header";
// @ts-ignore
import Footer from "./footer";
import { useHistory } from 'react-router-dom5';

function MyLandingPage() {
let sessionContext = Session.useSessionContext();
const history = useHistory();
if (sessionContext.loading) {
return null;
}
if (sessionContext.doesSessionExist) {
// We wrap this with <SessionAuth /> so that
// all claims are validated before showing the logged in UI.
// For example, if email verification is switched on, and
// the user's email is not verified, then <SessionAuth />
// will redirect to the email verification page.
return (
<Session.SessionAuth>
<Header />
You are logged in!
<Footer />
</Session.SessionAuth>
)
} else {
return (
<div>
<Header />
// highlight-next-line
<SignInAndUp navigate={history} />
<Footer />
</div>
)
}
}
```

</TabItem>

</RRDVersionSubTabs>

</Answer>
<Answer title="No">


```tsx
import React from "react";
Expand Down Expand Up @@ -92,16 +206,20 @@ function MyLandingPage() {
}
}
```

</Answer>
</Question>

</TabItem>
</FrontendSDKTabs>
</FrontendPreBuiltUITabs>

## Step 3: Changing the website path for the login UI

The default path for this is component is `/{websiteBasePath}/`.

If you are displaying this at some custom path, then you need add additional config on frontend:

<FrontendSDKTabs>
<FrontendPreBuiltUITabs>
<TabItem value="reactjs">

```tsx
Expand All @@ -128,4 +246,54 @@ SuperTokens.init({
})
```
</TabItem>
</FrontendSDKTabs>
</FrontendPreBuiltUITabs>

## Optional: Prevent redirection after SignIn / Up

Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead. Typically, this is used if you want to embed the sign in / up component in a popup and want to just dismiss the popup post login.

<FrontendPreBuiltUITabs>
<TabItem value="reactjs">

```tsx
import SuperTokens from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";

SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
EmailPassword.init({
//highlight-start
getRedirectionURL: async (context) => {
// Prevent redirection after successful sign in/up by returning null.
if (context.action === "SUCCESS") {
return null;
};
},
//highlight-end
})
],
})
```
</TabItem>
</FrontendPreBuiltUITabs>

:::note
To avoid redirection for failed claims, such as Email Verification, reach out to us on [Discord](https://supertokens.com/discord) for assistance.
:::

## Optional: Rendering Auth components together in a popup and page

You may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.

</PreBuiltUIContent>

<CustomUIContent>
This guide is not applicable for Custom UI.
</CustomUIContent>

</PreBuiltOrCustomUISwitcher>
5 changes: 5 additions & 0 deletions v2/emailpassword/pre-built-ui/auth-redirection.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ SuperTokens.init({
// we are navigating back to where the user was before they authenticated
return context.redirectToPath;
}
if (context.isNewPrimaryUser) {
// user signed up
} else {
// user signed in
}
return "/dashboard";
}
return undefined;
Expand Down
4 changes: 2 additions & 2 deletions v2/passwordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import TabItem from '@theme/TabItem';

# Redirection Callback Hook

This function is used to change where the user is redirected to post certain actions. For example, you can use this to redirect a user to a specific URL post sign in / up.
This function is used to change where the user is redirected to post certain actions. For example, you can use this to redirect a user to a specific URL post sign in / up. If you're embedding the sign in / up components in a popup and wish to disable redirection entirely, simply return `null`.

<FrontendSDKTabs>
<TabItem value="reactjs">
Expand All @@ -27,7 +27,7 @@ Passwordless.init({
// we are navigating back to where the user was before they authenticated
return redirectToPath;
}
if (context.isNewRecipeUser && context.user.loginMethods.length === 1) {
if (context.isNewPrimaryUser) {
// user signed up
return "/onboarding"
} else {
Expand Down
Loading

0 comments on commit 9dbabbe

Please sign in to comment.