Can't login using email/password after customizing hosted page

Help
, ,
1

I’m new to Auth0 (and this type of authentication), so please bear with me.

Every time I’m trying to login using email/password (or after using signup, when it auto-logs in), i’m getting:

access_denied: Password login is disabled for clients using externally hosted login pages with oidc_conformant flag set.

I’m using the Hosted Pages and use customize. I’ve slightly altered the default. Here’s the relevant block:

    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: 'token',
        params: {
          'audience': 'https://api.ngageonline.net',
          'scope': 'openid profile email'
        }
      },
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageDictionary: languageDictionary,
      theme: {
        logo:            'https://i.imgur.com/594o5qY.png',
        primaryColor:    '#a10000'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      // uncomment if you want small buttons for social providers
      socialButtonStyle: 'small'
    });

This is based on a tutorial I was following on Udemy (which was a bit out-of-date, but I managed to figure out the code differences).

Anywho,… If I turn off OIDC, it will let me log in and it redirects to my page, but the accessToken I’m getting back is different from what I’m expecting. It’s fairly short and doesn’t validate as JWT.
So, I leave OIDC on, but can only properly login with the one-click login where it remembered me (the part where it asks: “Not your account?”).
I’ve been trying hard to find the answers in the documentation and google, but honestly, it’s all very confusing. Seems like most past discussions were for earlier versions of Auth0.

My webpage is built on Angular & Dotnet Core. Please let me know if you need any other code, but I suspect I’m simply doing something wrong with the custom hosted-pages code?

2

Although you can customize the Lock instance used in your hosted login page there are certain configuration that needs to the one used by default, in particular, the settings related to the internal options available when using Lock from within the hosted page.

For example, my customized hosted login page sets other Lock display options, but leaves the following options as they are in the default template:

auth: {
  redirectUrl: config.callbackURL,
  responseType: (config.internalOptions || {}).response_type ||
    config.callbackOnLocationHash ? 'token' : 'code',
  params: config.internalOptions
},

If the Lock instance is not initialized properly then it has no notion that it’s working from the hosted login page and the error in question may be triggered.

In conclusion, the auth options should be the ones used in the default template; in general, you should not be changing those to hardcoded values. All the options that you hardcoded in your hosted login page, more specifically, responseType, audience and scope can be provided (and should be) by the client application so you should go back to using the internal options and adjust the client application if you want to provide specific values.

3

OMG, I can’t believe it was that simple.

Udemy tutorial was older than I thought. Instructor was setting these options on the hosted pages so I figured that’s the way to override things. It was hard to tell as it was using Lock, as opposed to Auth0.js.

Auth0.js is the one I’m using now since that’s what’s being used in the quick-sample. However, I have seen other samples with auth0-lock for embedded login pages. Is that the actual difference, or is auth0-lock an older library? I did get an auth0-lock version to work as well but figured I should stick with the official sample.

4

OMG, I can’t believe it was that simple.

Udemy tutorial was older than I thought. Instructor was setting these options on the hosted pages so I figured that’s the way to override things. It was hard to tell as it was using Lock, as opposed to Auth0.js.

Auth0.js is the one I’m using now since that’s what’s being used in the quick-sample. However, I have seen other samples with auth0-lock for embedded login pages. Is that the actual difference, or is auth0-lock an older library? I did get an auth0-lock version to work as well but figured I should stick with the official sample.

5

The big different between Auth0.js and Lock is that Lock also provides you with an UI while Auth0.js is just logic. Both can then be used for embedded login (in the application itself) or centralized login through the hosted page.

For simplicity and added security the recommendation is to go through the hosted login page.