Where should add the CDN script?

[leongrin]

I am beginning to integrate Auth0 to my Angular 7 project, and I would like to know where should I insert the CDN script?

<script src="https://cdn.auth0.com/js/auth0/9.10/auth0.min.js"></script>

Is it on the Index.html? On the header? Body?

[kim.maida]

Hi @leongrin! The best way to include auth0.js in your Angular project will be using the npm package. In your project’s root, run:

npm install auth0-js@latest --save

You will then be able to import auth0 in your Angular services like so:

import * as auth0 from 'auth0-js';

[leongrin]

Hi Kim. I installed auth0.js with npm, and I am importing auth0 successfully on my Angular service (import * as auth0 from ‘auth0-js’;).

But are you sure I can skip the “add script” step recommended by the guide? Auth0 Angular SDK Quickstarts: Login
See attached image.

I am asking this because I am still getting errors with authentications (see attached image), and when I add the recommended script tag to my index head or body, I get a new error.

[leongrin]

BTW, it doesn’t seem to be a problem with the Allowed Web Origins config.

[nicolas_sabena]

Hi @leongrin. We need to separate two different usages of SDKs in this scenario:

• In your Angular app you are referencing Auth0.js, which will handle two basic tasks:
  • Redirect the user to your Auth0 domain’s /authorize endpoint to get a token (auth0-angular-samples/auth.service.ts at cd6a635cc7b4ec8f3302da1582c3a18c97cd04d1 · auth0-samples/auth0-angular-samples · GitHub)
  • Validate and process the response received from Auth0 once the user finishes the authorization flow (auth0-angular-samples/auth.service.ts at cd6a635cc7b4ec8f3302da1582c3a18c97cd04d1 · auth0-samples/auth0-angular-samples · GitHub).
• In the Auth0 hosted login page (from the screenshot) you are using Lock. Lock is the UI widget that will get the credentials from the user and send them to Auth0 to continue the authorization process.

On the app side, the sample from the quickstart references the auth0-js package in the package.json file:

auth0-samples/auth0-angular-samples/blob/cd6a635cc7b4ec8f3302da1582c3a18c97cd04d1/01-Login/package.json#L24

The code then uses import to reference the package installed: auth0-angular-samples/auth.service.ts at cd6a635cc7b4ec8f3302da1582c3a18c97cd04d1 · auth0-samples/auth0-angular-samples · GitHub

In the screenshot you provided, you are showing Lock in the hosted login page. This is separate from the specifics of the angular application (or any other application that you might have), and its purpose is to authenticate the user. The particular error message displayed about not finding /user/ssodata is misleading, as this is expected on new tenants. I’ve reported this in this GH issue, hopefully the message will be improved soon.

[leongrin]

Hi Nicolas,

Good to know that I should not worry about this user.ssodata error message. I thought this error might be related to another error, which is when I refresh the page with the user logged in, the app state is lost and the user is logged out. Do you know what could be causing this?