Allow file Web Origin

[mcomash]

I am coding an Electron Desktop app with JS and I need to call the login lock from a file.
I have no problem signing in with Social Logins but when I try to log in with Username-Password authentication I get a 403 from /co/authenticate saying file:// origin is not allowed.

Any solution?

[ricardo.batista]

You should try adding file://* in the Allowed Origins (CORS) for your client in the dashboard: https://manage.auth0.com/#/clients

This should enable you to bypass the “Origin is not allowed” error when calling lock from a file://…

[mcomash]

I already added file://* in CORS but I still get a 403 (for /co/authenticate) when trying to log in from Username-Password lock…

[mcomash]

I already added file://* in CORS but I still get a 403 (for /co/authenticate) when trying to log in from Username-Password lock…

[chris.humboldt]

I am having the same issue. Is there a solution to this?

[trice]

I am also having trouble getting beyond the issue described above. Social logins work fine in my electron app, but username-password-authentication fails with a 403 and “Origin file:// is not allowed.”

I already have file://* in my list of allowed origins. My lock options are

{
  auth: {
    redirect: false,
    sso: false
  }
}

Has anyone been able to get around this problem? Any help would be appreciated.

[trice]

As a (hopefully temporary) workaround, I enabled password grants in the API and am overriding the popup functionality for username/password submission by making a manual request to the API to retrieve an access token. It’s not pretty, but it works. The code below was written against auth0-lock version 11.7.2.

Social logins are still handled by the lock since I’m not having any issue there.

const clientId = '....';
const domain = '....';

const lock = new Lock(clientId, domain, {
  auth: {
    sso: false,
    redirect: false
  }
});

/**
 * Handle successful authentications
 *
 * @param {object} authResult
 * @param {string} authResult.accessToken
 * @param {string} authResult.tokenType
 * @param {number} authResult.expiresIn
 */
function onAuthenticated(authResult) {
  lock.hide();
  // ...post-authentication code
}

/**
 * Use Auth0 API for username/password authentication.
 *
 * @param {Event} e
 */
function logMeIn(e) {
  e.preventDefault();
  e.stopPropagation();

  const widget = document.querySelector('.auth0-lock-widget');

  const username = widget.querySelector('input[name=email]').value;
  const password = widget.querySelector('input[name=password]').value;

  fetch(urljoin('https://', domain, 'oauth/token'), {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      grant_type: 'password',
      client_id: clientId,
      username,
      password
    })
  })
    .then(res => res.json())
    .then(data => {
      if (data.error) {
        throw new Error(data.error_description);
      }

      // normalizing authResult object to camel case property names.
      //   * auth0-lock returns camelCased response body
      //   * auth0 api return snake_cased response body
      return {
        accessToken: data.access_token,
        expiresIn: data.expires_in,
        tokenType: data.token_type
      };
    })
    .then(onAuthenticated)
    .catch(err => alert(err.message));
}

// handle social logins
lock.on('authenticated', onAuthenticated);

// intercept username/password submission attempt
lock.on('show', () => {
  document
    .querySelector('.auth0-lock-submit')
    .addEventListener('click', logMeIn);
});

lock.on('hide', () => {
  document
    .querySelector('.auth0-lock-submit')
    .removeEventListener('click', logMeIn);
  render();
});