Auth0 Single Page App Confusion

Get Help
,
22

Hi again!

Great to hear you managed to make progress with the indefinite loading screen created by the protected page!

Just to confirm, have you imported the respective createAuth0Client() within your application as such:

import { createAuth0Client } from '@auth0/auth0-spa-js';

From what I understand the root cause of the error message “createAuth0Client is not defined” would be due to the fact that it is not being imported from the Auth0 SPA JS sdk within your codebase, causing the whole authorization process to fail due to the severed connection to your Auth0 application and tenant.

If you can either post your code within the thread (make sure to sanitize any sensitive information) or you can send me a DM.

Kind Regards,
Nik

Kind Regards,
Nik

23

Hi Nik,

Let me explain.

In an earlier post you made this comment to me:

So I tried to use your suggestion to build a version of my app that would work on my GoDaddy server.

  1. I inserted a CDN script tag into the index.html file in the . I used your script that you provided in an earlier posting.
  2. I removed the Import Auth0 SPA JS from the app.js file and modified the Auth0Client code as follows:

let auth0Client = null;
window.onload = async () => {
auth0Client = await auth0.createAuth0Client({
domain: “YOUR_AUTH0_DOMAIN”,
clientId: “YOUR_CLIENT_ID”,
authorizationParams: {
redirect_uri: window.location.origin
}
});

I tried to run “npm run build” in my terminal but I received this error message in my terminal:

PS C:\PECBMembersProd> npm run build

pecbmembersprod@1.0.0 build
vite build
vite v8.0.13 building client environment for production…

✓ 5 modules transformed.
✗ Build failed in 269ms
error during build:

Build failed with 1 error:
[PARSE_ERROR] Expected a semicolon or an implicit semicolon after a statement, but found none
╭─[ app.js:31:4 ]
│
31 │ } catch (err) {
│ │
│ ╰─
│
│ Help: Try inserting a semicolon here
────╯

at aggregateBindingErrorsIntoJsError (file:///C:/PECBMembersProd/node_modules/rolldown/dist/shared/error-CkdMJ9ps.mjs:48:18)
at unwrapBindingResult (file:///C:/PECBMembersProd/node_modules/rolldown/dist/shared/error-CkdMJ9ps.mjs:18:128)
at #build (file:///C:/PECBMembersProd/node_modules/rolldown/dist/shared/rolldown-build-BVD3dIdE.mjs:3275:34)
at async buildEnvironment (file:///C:/PECBMembersProd/node_modules/vite/dist/node/chunks/node.js:33133:64)
at async Object.build (file:///C:/PECBMembersProd/node_modules/vite/dist/node/chunks/node.js:33555:19)
at async Object.buildApp (file:///C:/PECBMembersProd/node_modules/vite/dist/node/chunks/node.js:33552:153)
at async CAC.<anonymous> (file:///C:/PECBMembersProd/node_modules/vite/dist/node/cli.js:777:3) {

errors: [Getter/Setter]
}

Apparently Vite doesn’t like the syntax that you need to load Auth0 SPA JS when you’re running in a browser environment.

Is there a way to work around these issues and use Vite to build the code that does run in a browser?

Kind regards,

Warren