Skip to content

Commit

Permalink
Merge pull request #855 from supertokens/webjs-uri-support
Browse files Browse the repository at this point in the history
Added support for dynamic web-js library URI
  • Loading branch information
rishabhpoddar authored Oct 8, 2024
2 parents f01e706 + 8a7e148 commit 1d66e2a
Show file tree
Hide file tree
Showing 13 changed files with 237 additions and 30 deletions.
7 changes: 6 additions & 1 deletion v2/emailpassword/custom-ui/enable-email-verification.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -141,11 +142,15 @@ SuperTokens.init({

Add the following `<script>` element along with the other ones in your app

<WebJsInjector>

```bash
# ...other script tags in the frontend init section
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/emailverification.js"></script>
<script src="^{jsdeliver_webjs_emailverification}"></script>
```

</WebJsInjector>

Then call the `supertokensEmailVerification.init` function as shown below

```tsx
Expand Down
13 changes: 9 additions & 4 deletions v2/emailpassword/custom-ui/init/frontend.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -38,13 +39,17 @@ npm i -s supertokens-web-js

You need to add all of the following scripts to your app

<WebJsInjector>

```bash
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/website.js"></script>
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/supertokens.js"></script>
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/session.js"></script>
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/^{codeImportRecipeName}.js"></script>
<script src="^{jsdeliver_webjs_website}"></script>
<script src="^{jsdeliver_webjs_supertokens}"></script>
<script src="^{jsdeliver_webjs_session}"></script>
<script src="^{jsdeliver_webjs_^{codeImportRecipeName}}"></script>
```

</WebJsInjector>

</TabItem>
</NpmOrScriptTabs>

Expand Down
7 changes: 6 additions & 1 deletion v2/passwordless/custom-ui/enable-email-verification.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -145,11 +146,15 @@ SuperTokens.init({

Add the following `<script>` element along with the other ones in your app

<WebJsInjector>

```bash
# ...other script tags in the frontend init section
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/emailverification.js"></script>
<script src="^{jsdeliver_webjs_emailverification}"></script>
```

</WebJsInjector>

Then call the `supertokensEmailVerification.init` function as shown below

```tsx
Expand Down
13 changes: 9 additions & 4 deletions v2/passwordless/custom-ui/init/frontend.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -39,13 +40,17 @@ npm i -s supertokens-web-js

You need to add all of the following scripts to your app

<WebJsInjector>

```bash
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/website.js"></script>
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/supertokens.js"></script>
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/session.js"></script>
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/^{codeImportRecipeName}.js"></script>
<script src="^{jsdeliver_webjs_website}"></script>
<script src="^{jsdeliver_webjs_supertokens}"></script>
<script src="^{jsdeliver_webjs_session}"></script>
<script src="^{jsdeliver_webjs_^{codeImportRecipeName}}"></script>
```

</WebJsInjector>

</TabItem>
</NpmOrScriptTabs>

Expand Down
11 changes: 8 additions & 3 deletions v2/session/quick-setup/frontend.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -36,12 +37,16 @@ npm i -s supertokens-web-js

You need to add all of the following scripts to your app

<WebJsInjector>

```bash
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/website.js"></script>
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/supertokens.js"></script>
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/session.js"></script>
<script src="^{jsdeliver_webjs_website}"></script>
<script src="^{jsdeliver_webjs_supertokens}"></script>
<script src="^{jsdeliver_webjs_session}"></script>
```

</WebJsInjector>

</TabItem>
</NpmOrScriptTabs>

Expand Down
30 changes: 30 additions & 0 deletions v2/src/components/api/webJs.ts
Original file line number Diff line number Diff line change
@@ -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;
}
122 changes: 122 additions & 0 deletions v2/src/components/webJsInjector/index.tsx
Original file line number Diff line number Diff line change
@@ -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/[email protected]/bundle/dateprovider.test.js",
emailpassword:
"https://cdn.jsdelivr.net/gh/supertokens/[email protected]/bundle/emailpassword.test.js",
emailverification:
"https://cdn.jsdelivr.net/gh/supertokens/[email protected]/bundle/emailverification.test.js",
multifactorauth:
"https://cdn.jsdelivr.net/gh/supertokens/[email protected]/bundle/multifactorauth.test.js",
multitenancy:
"https://cdn.jsdelivr.net/gh/supertokens/[email protected]/bundle/multitenancy.test.js",
passwordless:
"https://cdn.jsdelivr.net/gh/supertokens/[email protected]/bundle/passwordless.test.js",
session:
"https://cdn.jsdelivr.net/gh/supertokens/[email protected]/bundle/session.test.js",
supertokens:
"https://cdn.jsdelivr.net/gh/supertokens/[email protected]/bundle/supertokens.test.js",
thirdparty:
"https://cdn.jsdelivr.net/gh/supertokens/[email protected]/bundle/thirdparty.test.js",
totp: "https://cdn.jsdelivr.net/gh/supertokens/[email protected]/bundle/totp.test.js",
userroles:
"https://cdn.jsdelivr.net/gh/supertokens/[email protected]/bundle/userroles.test.js",
website:
"https://cdn.jsdelivr.net/gh/supertokens/[email protected]/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;
}
}
7 changes: 6 additions & 1 deletion v2/thirdparty/custom-ui/enable-email-verification.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -145,11 +146,15 @@ SuperTokens.init({

Add the following `<script>` element along with the other ones in your app

<WebJsInjector>

```bash
# ...other script tags in the frontend init section
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/emailverification.js"></script>
<script src="^{jsdeliver_webjs_emailverification}"></script>
```

</WebJsInjector>

Then call the `supertokensEmailVerification.init` function as shown below

```tsx
Expand Down
13 changes: 9 additions & 4 deletions v2/thirdparty/custom-ui/init/frontend.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -37,13 +38,17 @@ npm i -s supertokens-web-js

You need to add all of the following scripts to your app

<WebJsInjector>

```bash
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/website.js"></script>
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/supertokens.js"></script>
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/session.js"></script>
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/^{codeImportRecipeName}.js"></script>
<script src="^{jsdeliver_webjs_website}"></script>
<script src="^{jsdeliver_webjs_supertokens}"></script>
<script src="^{jsdeliver_webjs_session}"></script>
<script src="^{jsdeliver_webjs_^{codeImportRecipeName}}"></script>
```

</WebJsInjector>

</TabItem>
</NpmOrScriptTabs>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -145,11 +146,15 @@ SuperTokens.init({

Add the following `<script>` element along with the other ones in your app

<WebJsInjector>

```bash
# ...other script tags in the frontend init section
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/emailverification.js"></script>
<script src="^{jsdeliver_webjs_emailverification}"></script>
```

</WebJsInjector>

Then call the `supertokensEmailVerification.init` function as shown below

```tsx
Expand Down
Loading

0 comments on commit 1d66e2a

Please sign in to comment.