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
-
-
-
-
-
+
+
+
+
+
```
+
+