Problem with login in browsers like Safari, Firefox, Brave

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) => {
                connection: DATABASE_CONNECTION,
                username: data.username,
                password: data.password,
                realm: DATABASE_CONNECTION,
                state: stateParam,
            } as CrossOriginLoginOptions, (error, result) => {
                if (error) {
                    setErrorResponse(error.error_description || error.description || 'something went wrong')
    }, [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?

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.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.