Redirecting after login

Help
1

Hi, I have been stuck on this annoying simple problem. I am building a project on the React single page application (the same which comes with Auth0 download).

My objective is to redirect the user after authentication. (Note: I have followed: Redirect Users , but still facing issues).

Following Auth0’s sample project file structure:

My index.js looks like this:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Auth0Provider } from "./react-auth0-spa";
import config from "./auth_config.json";
import history from "./utils/history";

const onRedirectCallback = appState => {
  history.push(
    appState && appState.targetUrl
      ? appState.targetUrl
      : window.location.pathname
  );
};

ReactDOM.render(
  <Auth0Provider
    domain={config.domain}
    client_id={config.clientId}
    redirect_uri={window.location.origin}
    onRedirectCallback={onRedirectCallback}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

If I change

const onRedirectCallback = appState => { history.push( appState && appState.targetUrl ? appState.targetUrl : window.location.pathname ); };

to:

const onRedirectCallback = () => {
  history.push('/EXAMPLEROUTE);
};

It works, but I have issues routing later with the redirect in the Safari browser (Chrome worked well).

So should I change the onRedirectCallback function to something else or is there another way I can change the redirecting location after logging in?

I have also allowed Allowed Callback URLs: to those I want to redirect in…

(currently, it will go to “/” as it does in the sample app.)

Thank you for your assistance who ever can help me!

1 Like
2

I was able to solve it:

I changed index.js like this:

const onRedirectCallback = appState => {
  history.push(
    appState && appState.targetUrl
      ? appState.targetUrl
      : window.location.href = "https://www.exampleroute.com/pointofredirect"
  );
};

Hope it helps someone with the same issue! :slight_smile:

2 Likes
3

Thanks a lot for sharing that with the rest of community @iiro12!

4

Thanks a lot for sharing kroger feedback

1 Like