Problem with login in browsers like Safari, Firefox, Brave

Get Help
,
1

I use the library

"@auth0/auth0-react": "^2.2.1"

I connect with the function loginWithPopup from the Auth0 hook: I can connect, but after refreshing the page I don’t receive a token with getAccessTokenSilently and need to connect again.

We use Cross-Origin Authentication.

This happens in browsers like Safari, Firefox, Brave.

My code:


import {useAuth0} from "@auth0/auth0-react";

const HomePage: FC = () => {
const {loginWithPopup} = useAuth0();
return (
<Button onClick={() => loginWithPopup()}>{'Login'}</Button>
)
}

also I don’t get user details: only user_id (sub)

const { user } = useAuth0();

console.log(user) //{sub: 'google-oauth2|111490016442351871588'}

Also, I try to log in with API of Auth0.

As for the API, I’m using a library

"auth0-js": "^9.22.1"

In the same browsers I try to connect using functions like


import auth0 from "auth0-js";

export const webAuth = new auth0.WebAuth({
    domain: process.env.REACT_APP_AUTH0_DOMAIN as string,
    clientID: process.env.REACT_APP_AUTH0_CLIENT_ID as string,
    audience: process.env.REACT_APP_AUTH0_AUDIENCE as string,
    redirectUri: window?.location?.origin,
    responseType: 'token',
    scope: 'openid profile email read:current_user update:current_user_metadata offline_access',
});

const loginWithUsernamePassword = useCallback((data: TFormData) => {
        return new Promise((resolve, reject) => {
            webAuth.login({
                connection: DATABASE_CONNECTION,
                username: data.username,
                password: data.password,
                realm: DATABASE_CONNECTION,
                state: stateParam,
            } as CrossOriginLoginOptions, (error, result) => {
                if (error) {
                    console.log(error)
                    reject(error);
                    setErrorResponse(error.error_description || error.description || 'something went wrong')
                    return;
                }
                resolve(result);
            })
        })
    }, [webAuth]);

const loginWithGoogle = useCallback(() => {
        webAuth.authorize({connection: 'google-oauth2', redirectUri});
    }, [webAuth]);

and the connection doesn’t happen at all in both cases

What do I do wrong?

3

Hey there @alfred1 !

That would be, unfortunately, an expected behaviour for browsers which technology diable storing 3d party cookies. When the user authenticates, auth0 server responds with the header: set cookie=(…) so that after a successful authentication, there are session related cookies sent from auth0 to the user browser and reused on each subsequent request to the /authorize to perform silent authentication on page refresh (works for chrome which by default doesn’t prevent this behaviour).

We use Cross-Origin Authentication.

Because cross-origin authentication is achieved using third-party cookies, disabling third-party cookies will make cross-origin authentication fail. Some browsers, such as the newest version of Firefox, disable third-party cookies by default, meaning that cross-origin authentication will not work for users on Firefox. The only way to make embedded login work for Firefox users is to use a custom domain, as described below.

It looks like, if you care to work with an embedded authentication form, and rely on a silent authentication, the custom domain for your auth0 tenant would be a solution, but please take into account it’s a paid feature.

Alternatively, you can switch to using the auth0’s Universal login page (same domain during authentication) and using refresh token rotation instead of the silent authentication.