# loginWithRedirect not working with @auth0/auth0-spa-js

**URL:** <https://community.auth0.com/t/loginwithredirect-not-working-with-auth0-auth0-spa-js/71801>\
**Category:** Get Help\
**Created:** [October 21, 2021, 4:10pm UTC](https://community.auth0.com/t/loginwithredirect-not-working-with-auth0-auth0-spa-js/71801 "2021-10-21T16:10:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![david.yang](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/david.yang/32/22931_2.png) [@david.yang](https://community.auth0.com/u/david.yang)\
**Post date:** [October 21, 2021, 4:10pm UTC](https://community.auth0.com/t/loginwithredirect-not-working-with-auth0-auth0-spa-js/71801/1 "2021-10-21T16:10:26Z")

</div>

I am using @auth0/auth0-spa-js library(the latest version 1.19.2).

My issue is that loginWithRedirect is not working, but loginWithPopup works properly.

I have the loginWithRedirect function in React Context API.

```auto
let auth0Client = null;

const initialAuthState = {
  isAuthenticated: false,
  isInitialised: false,
  user: null,
  info: null
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'INITIALISE': {
      const { isAuthenticated, user, info } = action.payload;

      return {
        ...state,
        isAuthenticated,
        isInitialised: true,
        user,
        info
      };
    }
    case 'LOGIN': {
      const { user, info } = action.payload;

      return {
        ...state,
        isAuthenticated: true,
        user,
        info
      };
    }
    default: {
      return { ...state };
    }
  }
};

const AuthContext = createContext({
  ...initialAuthState,
  method: 'Auth0',
  loginWithRedirect: () => Promise.resolve(),
});

export const AuthProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialAuthState);

  const onLoginSuccess = async ({ id_token, user, actionType }) => {
    if (id_token) {
      axios.defaults.headers.common.Authorization = `Bearer ${id_token}`;
      axios.defaults.headers.common['Content-Type'] = 'application/json';
    } else {
      delete axios.defaults.headers.common.Authorization;
    }

    const data = JSON.stringify({
      email: user.email,
      name: user.name,
      avatar: user.picture
    });
    const me = await axios.post(`${backendUrl}/check-user`, data, {
      headers: { 'Content-Type': 'application/json' }
    });

    dispatch({
      type: actionType || 'LOGIN',
      payload: {
        isAuthenticated: true,
        user: {
          id: user.sub,
          avatar: user.picture,
          email: user.email,
          name: user.name,
        },
        info: me.data.user
      }
    });
  };

  const loginWithRedirect = async options => {
    await auth0Client.loginWithRedirect(options);
    await auth0Client.handleRedirectCallback();
    // And then what should I do here?

    const isAuthenticated = await auth0Client.isAuthenticated();
  };

  useEffect(() => {
    const initialise = async () => {
      try {
        auth0Client = new Auth0Client({
          redirect_uri: `${window.location.origin}/verification`,
          cacheLocation: 'localstorage',
          ...auth0Config
        });
  
        await auth0Client.checkSession();

        const isAuthenticated = await auth0Client.isAuthenticated();

        if (isAuthenticated) {
          const user = await auth0Client.getUser();
          const claims = await auth0Client.getIdTokenClaims();
          const id_token = claims.__raw;
          await onLoginSuccess({ id_token, user, actionType: 'INITIALISE' });
        } else {
          dispatch({
            type: 'INITIALISE',
            payload: {
              isAuthenticated,
              user: null,
              info: null
            }
          });
        }
      } catch (err) {
        console.error(err);
        dispatch({
          type: 'INITIALISE',
          payload: {
            isAuthenticated: false,
            user: null,
            info: null
          }
        });
      }
    };

    initialise();
  }, []);

  if (!state.isInitialised) {
    return <SplashScreen />;
  }

  return (
    <AuthContext.Provider
      value={{
        ...state,
        method: 'Auth0',
        loginWithRedirect,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

```

Actually, I just migrated loginWithPopup over to loginWithRedirect, and it seems like not working at all.  
If I run the loginWithRedirect function in my login page, it does redirect to the Auth0 universal login, and then login with my email and password does redirect to my login page.  
That’s all. Basically, it does redirect infinitely from my login page to Auth0 universal login page.

Thank you.

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [October 22, 2021, 12:36pm UTC](https://community.auth0.com/t/loginwithredirect-not-working-with-auth0-auth0-spa-js/71801/2 "2021-10-22T12:36:36Z")

</div>

Hey there!

Can I ask you to file in a bug report for this in the repo here:

> **[Build software better, together](https://github.com/auth0/auth0-spa-js/issues/new/choose)**
>
> GitHub is where people build software. More than 94 million people use GitHub to discover, fork, and contribute to over 330 million projects.

so it can get addressed by repo maintainers. Thank you!

---

<div class="post-metadata">

**Author:** ![david.yang](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/david.yang/32/22931_2.png) [@david.yang](https://community.auth0.com/u/david.yang)\
**Post date:** [October 25, 2021, 1:55am UTC](https://community.auth0.com/t/loginwithredirect-not-working-with-auth0-auth0-spa-js/71801/3 "2021-10-25T01:55:24Z")

</div>

Hey @konrad.sopala  
Thank you. I was able to fix that issue through GitHub issues as you suggested.

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [October 25, 2021, 9:06am UTC](https://community.auth0.com/t/loginwithredirect-not-working-with-auth0-auth0-spa-js/71801/4 "2021-10-25T09:06:47Z")

</div>

Perfect! Glad to hear that!

---

<div class="post-metadata">

**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\
**Post date:** [October 28, 2021, 12:55pm UTC](https://community.auth0.com/t/loginwithredirect-not-working-with-auth0-auth0-spa-js/71801/5 "2021-10-28T12:55:31Z")

</div>