Optimise bundle size for with-supertokens example (#31040)

This PR optimises the bundle size sent to the frontend for nextJS apps by lazy loading the SuperTokens backend SDK only when it's needed.

examples/with-supertokens/config/appInfo.js

@@ -0,0 +1,15 @@
+const port = process.env.APP_PORT || 3000
+
+const apiBasePath = '/api/auth/'
+
+export const websiteDomain =
+  process.env.APP_URL ||
+  process.env.NEXT_PUBLIC_APP_URL ||
+  `http://localhost:${port}`
+
+export const appInfo = {
+  appName: 'SuperTokens Demo App',
+  websiteDomain,
+  apiDomain: websiteDomain,
+  apiBasePath,
+}

examples/with-supertokens/config/supertokensConfig.js → examples/with-supertokens/config/backendConfig.js

@@ -1,22 +1,6 @@
 import ThirdPartyEmailPasswordNode from 'supertokens-node/recipe/thirdpartyemailpassword'
 import SessionNode from 'supertokens-node/recipe/session'
-
-import ThirdPartyEmailPasswordReact from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
-import SessionReact from 'supertokens-auth-react/recipe/session'
-
-const port = process.env.APP_PORT || 3000
-const websiteDomain =
-  process.env.APP_URL ||
-  process.env.NEXT_PUBLIC_APP_URL ||
-  `http://localhost:${port}`
-const apiBasePath = '/api/auth/'
-
-let appInfo = {
-  appName: 'SuperTokens Demo App',
-  websiteDomain,
-  apiDomain: websiteDomain,
-  apiBasePath,
-}
+import { appInfo } from './appInfo'
 
 export let backendConfig = () => {
   return {
@@ -50,23 +34,3 @@ export let backendConfig = () => {
     isInServerlessEnv: true,
   }
 }
-
-export let frontendConfig = () => {
-  return {
-    appInfo,
-    recipeList: [
-      ThirdPartyEmailPasswordReact.init({
-        emailVerificationFeature: {
-          mode: 'REQUIRED',
-        },
-        signInAndUpFeature: {
-          providers: [
-            ThirdPartyEmailPasswordReact.Google.init(),
-            ThirdPartyEmailPasswordReact.Github.init(),
-          ],
-        },
-      }),
-      SessionReact.init(),
-    ],
-  }
-}

examples/with-supertokens/config/frontendConfig.js

@@ -0,0 +1,23 @@
+import ThirdPartyEmailPasswordReact from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
+import SessionReact from 'supertokens-auth-react/recipe/session'
+import { appInfo } from './appInfo'
+
+export let frontendConfig = () => {
+  return {
+    appInfo,
+    recipeList: [
+      ThirdPartyEmailPasswordReact.init({
+        emailVerificationFeature: {
+          mode: 'REQUIRED',
+        },
+        signInAndUpFeature: {
+          providers: [
+            ThirdPartyEmailPasswordReact.Google.init(),
+            ThirdPartyEmailPasswordReact.Github.init(),
+          ],
+        },
+      }),
+      SessionReact.init(),
+    ],
+  }
+}

examples/with-supertokens/pages/_app.js

@@ -2,15 +2,20 @@ import '../styles/globals.css'
 import React from 'react'
 import { useEffect } from 'react'
 import SuperTokensReact from 'supertokens-auth-react'
-import * as SuperTokensConfig from '../config/supertokensConfig'
+import * as SuperTokensConfig from '../config/frontendConfig'
 import Session from 'supertokens-auth-react/recipe/session'
-import SuperTokensNode from 'supertokens-node'
 import { redirectToAuth } from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
 
+async function initNode() {
+  const supertokensNode = await import('supertokens-node')
+  const { backendConfig } = await import('../config/backendConfig')
+  supertokensNode.init(backendConfig())
+}
+
 if (typeof window !== 'undefined') {
   SuperTokensReact.init(SuperTokensConfig.frontendConfig())
 } else {
-  SuperTokensNode.init(SuperTokensConfig.backendConfig())
+  initNode().catch(console.error)
 }
 
 function MyApp({ Component, pageProps }) {

examples/with-supertokens/pages/api/auth/[[...path]].js

@@ -2,9 +2,9 @@
 import { superTokensNextWrapper } from 'supertokens-node/nextjs'
 import supertokens from 'supertokens-node'
 import { middleware } from 'supertokens-node/framework/express'
-import * as SuperTokensConfig from '../../../config/supertokensConfig'
+import { backendConfig } from '../../../config/backendConfig'
 
-supertokens.init(SuperTokensConfig.backendConfig())
+supertokens.init(backendConfig())
 
 export default async function superTokens(req, res) {
   await superTokensNextWrapper(

examples/with-supertokens/pages/api/user.js

@@ -1,9 +1,9 @@
 import { superTokensNextWrapper } from 'supertokens-node/nextjs'
 import { verifySession } from 'supertokens-node/recipe/session/framework/express'
 import supertokens from 'supertokens-node'
-import * as SuperTokensConfig from '../../config/supertokensConfig'
+import { backendConfig } from '../../config/backendConfig'
 
-supertokens.init(SuperTokensConfig.backendConfig())
+supertokens.init(backendConfig())
 
 export default async function user(req, res) {
   await superTokensNextWrapper(