From 8a7e148b746a1e00f943f7650869e5c49d25f1ac Mon Sep 17 00:00:00 2001 From: Victor Bojica Date: Wed, 2 Oct 2024 17:11:59 +0300 Subject: [PATCH] added support for dynamic web-js library URI --- .../custom-ui/enable-email-verification.mdx | 7 +- v2/emailpassword/custom-ui/init/frontend.mdx | 13 +- .../custom-ui/enable-email-verification.mdx | 7 +- v2/passwordless/custom-ui/init/frontend.mdx | 13 +- v2/session/quick-setup/frontend.mdx | 11 +- v2/src/components/api/webJs.ts | 30 +++++ v2/src/components/webJsInjector/index.tsx | 122 ++++++++++++++++++ .../custom-ui/enable-email-verification.mdx | 7 +- v2/thirdparty/custom-ui/init/frontend.mdx | 13 +- .../custom-ui/enable-email-verification.mdx | 7 +- .../custom-ui/init/frontend.mdx | 15 ++- .../custom-ui/enable-email-verification.mdx | 7 +- .../custom-ui/init/frontend.mdx | 15 ++- 13 files changed, 237 insertions(+), 30 deletions(-) create mode 100644 v2/src/components/api/webJs.ts create mode 100644 v2/src/components/webJsInjector/index.tsx diff --git a/v2/emailpassword/custom-ui/enable-email-verification.mdx b/v2/emailpassword/custom-ui/enable-email-verification.mdx index 79601a7ef..5900134e0 100644 --- a/v2/emailpassword/custom-ui/enable-email-verification.mdx +++ b/v2/emailpassword/custom-ui/enable-email-verification.mdx @@ -109,6 +109,7 @@ init( import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs" import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs" +import WebJsInjector from "/src/components/webJsInjector" ## Step 2: Frontend setup @@ -141,11 +142,15 @@ SuperTokens.init({ Add the following ` + ``` + + Then call the `supertokensEmailVerification.init` function as shown below ```tsx diff --git a/v2/emailpassword/custom-ui/init/frontend.mdx b/v2/emailpassword/custom-ui/init/frontend.mdx index 4c9ff955e..84a66a9cf 100644 --- a/v2/emailpassword/custom-ui/init/frontend.mdx +++ b/v2/emailpassword/custom-ui/init/frontend.mdx @@ -12,6 +12,7 @@ import TabItem from '@theme/TabItem'; import {Question, Answer}from "/src/components/question" import AppInfoForm from "/src/components/appInfoForm" import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs" +import WebJsInjector from "/src/components/webJsInjector" # Frontend Integration @@ -38,13 +39,17 @@ npm i -s supertokens-web-js You need to add all of the following scripts to your app + + ```bash - - - - + + + + ``` + + diff --git a/v2/passwordless/custom-ui/enable-email-verification.mdx b/v2/passwordless/custom-ui/enable-email-verification.mdx index 4b54c052d..3a593c75c 100644 --- a/v2/passwordless/custom-ui/enable-email-verification.mdx +++ b/v2/passwordless/custom-ui/enable-email-verification.mdx @@ -113,6 +113,7 @@ init( import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs" import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs" +import WebJsInjector from "/src/components/webJsInjector" ## Step 2: Frontend setup @@ -145,11 +146,15 @@ SuperTokens.init({ Add the following ` + ``` + + Then call the `supertokensEmailVerification.init` function as shown below ```tsx diff --git a/v2/passwordless/custom-ui/init/frontend.mdx b/v2/passwordless/custom-ui/init/frontend.mdx index cb854c529..7fc67425f 100644 --- a/v2/passwordless/custom-ui/init/frontend.mdx +++ b/v2/passwordless/custom-ui/init/frontend.mdx @@ -13,6 +13,7 @@ import TabItem from '@theme/TabItem'; import {Question, Answer}from "/src/components/question" import AppInfoForm from "/src/components/appInfoForm" import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs" +import WebJsInjector from "/src/components/webJsInjector" # Frontend Integration @@ -39,13 +40,17 @@ npm i -s supertokens-web-js You need to add all of the following scripts to your app + + ```bash - - - - + + + + ``` + + diff --git a/v2/session/quick-setup/frontend.mdx b/v2/session/quick-setup/frontend.mdx index b878890a1..c46e8b103 100644 --- a/v2/session/quick-setup/frontend.mdx +++ b/v2/session/quick-setup/frontend.mdx @@ -10,6 +10,7 @@ import TabItem from '@theme/TabItem'; import {Question, Answer}from "/src/components/question" import AppInfoForm from "/src/components/appInfoForm" import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs" +import WebJsInjector from "/src/components/webJsInjector" # Frontend Integration @@ -36,12 +37,16 @@ npm i -s supertokens-web-js You need to add all of the following scripts to your app + + ```bash - - - + + + ``` + + diff --git a/v2/src/components/api/webJs.ts b/v2/src/components/api/webJs.ts new file mode 100644 index 000000000..be4855a3a --- /dev/null +++ b/v2/src/components/api/webJs.ts @@ -0,0 +1,30 @@ +import { API_URL } from "../constants"; +import * as httpNetworking from "../httpNetworking"; + +const URL = API_URL + "/frontend/web-js"; +const VERSION = 0; + +export default async function getURI(): Promise<{ + uri: { + dateprovider: string; + emailpassword: string; + emailverification: string; + multifactorauth: string; + multitenancy: string; + passwordless: string; + session: string; + supertokens: string; + thirdparty: string; + totp: string; + userroles: string; + website: string; + }; +}> { + let options: httpNetworking.GETRequestConfig = { + timeout: 50000, + }; + + let response = (await httpNetworking.simpleGETRequest(URL, options, VERSION)) + .data; + return response; +} diff --git a/v2/src/components/webJsInjector/index.tsx b/v2/src/components/webJsInjector/index.tsx new file mode 100644 index 000000000..be9145ee4 --- /dev/null +++ b/v2/src/components/webJsInjector/index.tsx @@ -0,0 +1,122 @@ +import React, { PropsWithChildren } from "react"; +import { recursiveMap } from "../utils"; +import getURI from "../api/webJs"; +import { MOCK_ENABLED } from "../constants"; + +type Uri = { + dateprovider: string; + emailpassword: string; + emailverification: string; + multifactorauth: string; + multitenancy: string; + passwordless: string; + session: string; + supertokens: string; + thirdparty: string; + totp: string; + userroles: string; + website: string; +}; + +type State = { + uri: Uri | undefined; +}; +export default class WebJsInjector extends React.PureComponent< + PropsWithChildren<{}>, + State +> { + isUnmounting = false; + + constructor(props: PropsWithChildren<{}>) { + super(props); + this.state = { + uri: undefined, + }; + } + + replaceUrisByKeys(value: string) { + if (!this.state.uri) { + // replace all webjs mentions with empty string; + return value.replace(/\^\{jsdeliver_webjs_[^}]+\}/g, ""); + } + + const uri = this.state.uri; + return Object.keys(uri).reduce((acc, key) => { + acc = acc.replace( + new RegExp(`\\^\\{jsdeliver_webjs_${key}\\}`, "g"), + uri[key as keyof State["uri"]] + ); + return acc; + }, value); + } + + render() { + let result = recursiveMap(this.props.children, (c: any) => { + if (typeof c === "string") { + c = this.replaceUrisByKeys(c); + } + return c; + }); + + return result; + } + + async componentDidMount() { + if (typeof window != "undefined") { + if (MOCK_ENABLED) { + if (this.isUnmounting) { + return; + } + this.setState((oldState) => { + return { + ...oldState, + uri: { + dateprovider: + "https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js@vX.Y.Z/bundle/dateprovider.test.js", + emailpassword: + "https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js@vX.Y.Z/bundle/emailpassword.test.js", + emailverification: + "https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js@vX.Y.Z/bundle/emailverification.test.js", + multifactorauth: + "https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js@vX.Y.Z/bundle/multifactorauth.test.js", + multitenancy: + "https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js@vX.Y.Z/bundle/multitenancy.test.js", + passwordless: + "https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js@vX.Y.Z/bundle/passwordless.test.js", + session: + "https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js@vX.Y.Z/bundle/session.test.js", + supertokens: + "https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js@vX.Y.Z/bundle/supertokens.test.js", + thirdparty: + "https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js@vX.Y.Z/bundle/thirdparty.test.js", + totp: "https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js@vX.Y.Z/bundle/totp.test.js", + userroles: + "https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js@vX.Y.Z/bundle/userroles.test.js", + website: + "https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js@vX.Y.Z/bundle/website.test.js", + }, + }; + }); + } else { + try { + let uri = await getURI(); + if (this.isUnmounting) { + return; + } + this.setState((oldState) => { + return { + ...oldState, + uri: uri.uri, + }; + }); + } catch (err) { + console.error(err); + } + } + } + } + + componentWillUnmount() { + this.isUnmounting = true; + } +} diff --git a/v2/thirdparty/custom-ui/enable-email-verification.mdx b/v2/thirdparty/custom-ui/enable-email-verification.mdx index 033ccd0d9..028d1a5b0 100644 --- a/v2/thirdparty/custom-ui/enable-email-verification.mdx +++ b/v2/thirdparty/custom-ui/enable-email-verification.mdx @@ -113,6 +113,7 @@ init( import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs" import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs" +import WebJsInjector from "/src/components/webJsInjector" ## Step 2: Frontend setup @@ -145,11 +146,15 @@ SuperTokens.init({ Add the following ` + ``` + + Then call the `supertokensEmailVerification.init` function as shown below ```tsx diff --git a/v2/thirdparty/custom-ui/init/frontend.mdx b/v2/thirdparty/custom-ui/init/frontend.mdx index f646fd568..be3978fbf 100644 --- a/v2/thirdparty/custom-ui/init/frontend.mdx +++ b/v2/thirdparty/custom-ui/init/frontend.mdx @@ -11,6 +11,7 @@ import TabItem from '@theme/TabItem'; import {Question, Answer}from "/src/components/question" import AppInfoForm from "/src/components/appInfoForm" import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs" +import WebJsInjector from "/src/components/webJsInjector" # Frontend Integration @@ -37,13 +38,17 @@ npm i -s supertokens-web-js You need to add all of the following scripts to your app + + ```bash - - - - + + + + ``` + + diff --git a/v2/thirdpartyemailpassword/custom-ui/enable-email-verification.mdx b/v2/thirdpartyemailpassword/custom-ui/enable-email-verification.mdx index 033ccd0d9..028d1a5b0 100644 --- a/v2/thirdpartyemailpassword/custom-ui/enable-email-verification.mdx +++ b/v2/thirdpartyemailpassword/custom-ui/enable-email-verification.mdx @@ -113,6 +113,7 @@ init( import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs" import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs" +import WebJsInjector from "/src/components/webJsInjector" ## Step 2: Frontend setup @@ -145,11 +146,15 @@ SuperTokens.init({ Add the following ` + ``` + + Then call the `supertokensEmailVerification.init` function as shown below ```tsx diff --git a/v2/thirdpartyemailpassword/custom-ui/init/frontend.mdx b/v2/thirdpartyemailpassword/custom-ui/init/frontend.mdx index 0caf6009e..b4123a680 100644 --- a/v2/thirdpartyemailpassword/custom-ui/init/frontend.mdx +++ b/v2/thirdpartyemailpassword/custom-ui/init/frontend.mdx @@ -11,6 +11,7 @@ import TabItem from '@theme/TabItem'; import {Question, Answer}from "/src/components/question" import AppInfoForm from "/src/components/appInfoForm" import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs" +import WebJsInjector from "/src/components/webJsInjector" # Frontend Integration @@ -37,14 +38,18 @@ npm i -s supertokens-web-js You need to add all of the following scripts to your app + + ```bash - - - - - + + + + + ``` + + diff --git a/v2/thirdpartypasswordless/custom-ui/enable-email-verification.mdx b/v2/thirdpartypasswordless/custom-ui/enable-email-verification.mdx index e5f180afa..7fa80285a 100644 --- a/v2/thirdpartypasswordless/custom-ui/enable-email-verification.mdx +++ b/v2/thirdpartypasswordless/custom-ui/enable-email-verification.mdx @@ -114,6 +114,7 @@ init( import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs" import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs" +import WebJsInjector from "/src/components/webJsInjector" ## Step 2: Frontend setup @@ -146,11 +147,15 @@ SuperTokens.init({ Add the following ` + ``` + + Then call the `supertokensEmailVerification.init` function as shown below ```tsx diff --git a/v2/thirdpartypasswordless/custom-ui/init/frontend.mdx b/v2/thirdpartypasswordless/custom-ui/init/frontend.mdx index 9c07073b0..8f5185019 100644 --- a/v2/thirdpartypasswordless/custom-ui/init/frontend.mdx +++ b/v2/thirdpartypasswordless/custom-ui/init/frontend.mdx @@ -14,6 +14,7 @@ import TabItem from '@theme/TabItem'; import {Question, Answer}from "/src/components/question" import AppInfoForm from "/src/components/appInfoForm" import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs" +import WebJsInjector from "/src/components/webJsInjector" # Frontend Integration @@ -40,14 +41,18 @@ npm i -s supertokens-web-js You need to add all of the following scripts to your app + + ```bash - - - - - + + + + + ``` + +