Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add getRedirectionURL docs #756

Merged
merged 7 commits into from
Dec 11, 2023
Merged

feat: Add getRedirectionURL docs #756

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0e2c773
feat: Add getRedirectionURL docs
anku255 Dec 6, 2023
514990f
Update v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
anku255 Dec 8, 2023
5b65c1a
Update v2/passwordless/pre-built-ui/further-reading/passwordless-logi…
anku255 Dec 8, 2023
342f318
PR changes
anku255 Dec 8, 2023
269ab09
Fix code checking errors
anku255 Dec 11, 2023
d55af7b
PR changes
anku255 Dec 11, 2023
def279c
Update supertokens-auth-react version
anku255 Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion v2/emailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import TabItem from '@theme/TabItem';

# Redirection Callback Hook
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved

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.
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved
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 Down
186 changes: 177 additions & 9 deletions v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,29 @@
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>
This guide is not applicable for Pre built UI.
</PreBuiltUIContent>

<CustomUIContent>

## 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 +51,123 @@ SuperTokens.init({
});
```
</TabItem>
</FrontendSDKTabs>
</FrontendPreBuiltUITabs>

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

## Step 2: Render the component yourself

rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved
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-dom';

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 +210,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 +250,50 @@ 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.

</CustomUIContent>

</PreBuiltOrCustomUISwitcher>
2 changes: 1 addition & 1 deletion v2/passwordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
View file
Open in desktop
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 Down
Loading