Changing the Magic Link URL
#
Backend changeYou can change the URL of Magic Links by providing a callback on the backend.
- NodeJS
- GoLang
- Python
import SuperTokens from "supertokens-node";import Passwordless from "supertokens-node/recipe/passwordless";import Session from "supertokens-node/recipe/session";
SuperTokens.init({ appInfo: { apiDomain: "...", appName: "...", websiteDomain: "..." }, recipeList: [ Passwordless.init({ contactMethod: "EMAIL", // This example will work with any contactMethod createAndSendCustomEmail: async (input) => console.log(input), // This example works with the "USER_INPUT_CODE_AND_MAGIC_LINK" and "MAGIC_LINK" flows. flowType: "USER_INPUT_CODE_AND_MAGIC_LINK",
// Customize information in the URL. // By default: `${websiteDomain}/${websiteBasePath}/verify` getLinkDomainAndPath: async (contactInfo, context) => { // contactInfo is {email: string} | {phoneNumber: string} return "https://example.com/custom/auth/verify" } }), Session.init({ /* ... */ }) ]});
import ( "github.com/supertokens/supertokens-golang/recipe/passwordless" "github.com/supertokens/supertokens-golang/recipe/passwordless/plessmodels" "github.com/supertokens/supertokens-golang/supertokens")
func main() { supertokens.Init(supertokens.TypeInput{ RecipeList: []supertokens.Recipe{ passwordless.Init(plessmodels.TypeInput{ // Customize information in the URL. // By default: `${websiteDomain}/${websiteBasePath}/verify` GetLinkDomainAndPath: func(email, phoneNumber *string, userContext supertokens.UserContext) (string, error) { return "https://example.com/custom/auth/verify", nil }, }), }, })}
from supertokens_python.recipe import passwordlessfrom supertokens_python import InputAppInfo, initfrom supertokens_python.recipe.passwordless.utils import PhoneOrEmailInputfrom typing import Dict, Any
async def get_link_domain_and_path(config: PhoneOrEmailInput, user_context: Dict[str, Any]) -> str: return "https://example.com/custom/auth/verify"
init( app_info=InputAppInfo(api_domain="...", app_name="...", website_domain="..."), framework='...', recipe_list=[ passwordless.init( contact_config=..., flow_type="...", # Customize information in the URL. # By default: `${websiteDomain}/${websiteBasePath}/verify` get_link_domain_and_path=get_link_domain_and_path ) ])
#
Frontend change- ReactJS
- Plain JavaScript
- React Native
Note
To use SuperTokens with plain javascript you need to use the
To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here
You can refer to this blog post to know how this is done, the example uses social login but the same setup applies to other recipes as well.
supertokens-website
SDK. The SDK provides session management features.To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here
You can refer to this blog post to know how this is done, the example uses social login but the same setup applies to other recipes as well.
Note
To use SuperTokens with React Native you need to use the
To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here
supertokens-react-native
SDK. The SDK provides session management features.To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here
When the user clicks the magic link, you need to render the LinkClicked
component that exported by our SDK on that page. By default, this already happens on the ${websiteDomain}/${websiteBasePath}/verify
path. To change this, you need to:
#
1) Disable the default UI for the link clicked screen:import Passwordless from "supertokens-auth-react/recipe/passwordless";
Passwordless.init({ contactMethod: "EMAIL", // This example will work with any contactMethod linkClickedScreenFeature: { disableDefaultImplementation: true },});
#
2) Render the link clicked screen on your custom route:import React from "react";import {LinkClicked} from "supertokens-auth-react/recipe/passwordless";function CustomLinkClickedScreen () { return <LinkClicked />}