Lock login failing on Safari

[mrohitchoudhary]

I am facing a safari specific bug where my code is not working.

Here is what I am doing

import React, { Component } from 'react';
import Auth0Lock from 'auth0-lock';
import logo from './logo.svg';
import './App.css';

// Initializing our Auth0Lock
var lock = new Auth0Lock(
  'clientid',
  'domain'
);
class App extends Component {
  componentDidMount() {
    lock.on("authenticated", (authResult) => {
      // Use the token in authResult to getUserInfo() and save it to localStorage
      lock.getUserInfo(authResult.accessToken, (error, profile) => {
        if (error) {
          // Handle error
          console.log(error);
          return;
        }
       // document.getElementById('nick').textContent = profile.nickname;
        localStorage.setItem('accessToken', authResult.accessToken);
        localStorage.setItem('profile', JSON.stringify(profile));
        localStorage.setItem('nick', profile.nickname);
      });
    });

    lock.on('unrecoverable_error', (error) => {
      console.log(error)
    });
    lock.on('authorization_error', (error) => {
      console.log(error)
    })
    document.getElementById('btn-login').addEventListener('click', function() {
      lock.show();
    });
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
         <h2>Welcome <span id="nick" className="nickname">{localStorage.getItem('nick')}</span></h2>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <button id="btn-login">Login</button>
      </div>
    );
  }
}

export default App;

This code piece works perfectly in chrome but not in safari. This happens in my iPad (Both in Chrome and safari, OS is iOS12)

Sharing details about my system an browsers.

I am using mac.

Google Chrome is up to date
Version 69.0.3497.100 (Official Build) (64-bit)

Safari
Version 12.0 (13606.2.11)

[kimcodes]

@mrohitchoudhary what happens in safari? Is there a specific error you can share? depending on your answer we may need to set up a custom domain or create a cross-origin verification page.

[mrohitchoudhary]

Hi @kimcodes I am getting Third part cookie block issue. In one of my project I have used your enterprise version where custom domain is not an option. I added a cross origin verification page also for safari issue. It throws error while trying to save the values in cookie as third party cookies are by default blocked.

[mrohitchoudhary]

@kimcodes did you get the problem or you need more information. Please be little active as we are using your enterprise version.

[kimcodes]

Yes Safari does not support third-party cookies. If you set the Cross Origin Verification page correctly, Safari should work. Do note that Chrome & Opera will not work if they have disabled third party cookies. What happens when you setup the cross origin verification page? What error is thrown? Are you getting a Unable to configure verification page?

If you have an enterprise account you should be able to setup a custom domain. Can you explain your use case why a custom domain is not an option?

An alternative solution would be to use Universal Login, where your application redirects to the authorization server when logging in. By doing that, it’s Auth0 who ask the user for credentials and thus there’s no cross-origin authentication and third party cookies aren’t required. You can read more about universal vs embedded login here.

[csv]

Are you certain Universal Login works without custom domains?

Our app is redirecting to the hosted login page, but when we get to our app, checkSession() will say the user is not logged in on Safari 12 (no third party cookie usage). So the user is redirected back to /authorize again (via the authorize() method).

Am I missing something? I can’t see any information on the Universal Login page about requiring Custom domains to get Safari working. The TL;DR version of it seems to be “Use Universal Login, and it should work in all browsers”.

(Sorry if I am hijacking the thread btw)

[James.Morrison]

Hey there @csv, I apologize for the delay in response. I wanted to make a note that Universal login isn’t dependent on custom domains. If you are still battling this issue please let me know and I’d be happy to talk more about the scenario you are facing. Thanks in advance!