onRedirectCallback in React-SPA doesn't redirect to original link

Help
1

Hello! I currently have an Auth0 SPA React application, which I made following this tutorial: Auth0 React SDK Quickstarts: Login

After having the code exactly like this, with the Auth0Provider wrapping a Routes component, when the user logs in, it always redirects to the landing page of my web application. Any help is much appreciated!
Here my wrapping code, the Auth0Provider code is exactly how it is in the tutorial.

import ReactDOM from "react-dom";
import React from "react";
//Notifications throughout application
import ReactNotification from 'react-notifications-component'

import 'react-notifications-component/dist/theme.css'
import { Auth0Provider } from "./Authorization/react-auth0-wrapper";
import { AUTH_CONFIG } from "./Authorization/auth0-variables";
import { MakeMainRoutes } from "./routes";
require('dotenv').config();

// A function that routes the user to the right place
// after login
const onRedirectCallback = appState => {
    window.history.replaceState(
      {},
      document.title,
      appState && appState.targetUrl
        ? appState.targetUrl
        : window.location.pathname
    );
  };
ReactDOM.render(
    <Auth0Provider
      domain={AUTH_CONFIG.domain}
      client_id={AUTH_CONFIG.clientId}
      redirect_uri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
  >

      <ReactNotification />

      <MakeMainRoutes />

    </Auth0Provider>,

    document.getElementById("root")

  );
1 Like
3

Hi @TanBeige,

loginWithRedirect() is designed to navigate the user off the page (in the same tab) and to a login. onRedirectCallback() is a custom event to handle behaviours occurring after the login page takes you back to the app.
When you are taken to the login page, the browser will navigate away from your app. So it knows where to send you back - you must include a “redirect_uri”.

Please check this doc for more information: Redirect Users

Hope this helps!

4

Is this equivalent to passing in returnTo property to withAuthenticationRequired method?

Because it does not seem to be working in the production build

5

@lily.wisecarver are you able to follow up on that? Thanks!

6

We started to have this problem, and the solution was to remove encoding from the redirect urls, but that is odd because before was working just fine…

7

I am not sure if this is a solution, it was the workaround we did, but we were able to get encoded redirect urls and were working just fine.
Perhaps we can mark this as Workaround instead of solution?

8

Unfortunately we don’t have such option but thanks for sharing!