Why is my Redirect not working after the verifications?

user_12702965 0
Viewed 209

This following code is trying to verify something then need to redirect to homepage.

const EmailLink = () => {
    
  const testEmailAuth = () => {
    if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
      if (!email) {
        return null;
      }
      firebase
        .auth()
        .signInWithEmailLink(email, window.location.href)
        .then(function(result) {
          window.location.href = '/';
          // <Redirect to="/"/>
        })
        .catch(function(error) {
          console.log('error ' + error);
        });
    }
  };
  return (
    <div className="EmailLink">
      {testEmailAuth()}
    </div>
  );
};

I am trying to redirect with Redirect from react-router-dom. Its not working.

Its is working with window.location.href = '/'. Can I know why? & how to make things works with redirect

<Switch>
          <Route path="/finishedSignUp" component={EmailLink}/>
  </Switch>

export default withRouter(RootComponent);
react-router firebase reactjs
3 Answers

Since EmailLink is rendered in Switch by a Route component it receives route props. Use the passed history object to handle the redirect using history.replace().

Side note, you should not issue asynchronous calls and side effects from the "render", use an useEffect hook to handle this when the component mounts.

const EmailLink = ({ history, match }) => {

  useEffect(() => {
    const testEmailAuth = () => {
      if (firebase.auth().isSignInWithEmailLink(match.url)) {
        if (!email) {
          return null;
        }
        firebase
          .auth()
          .signInWithEmailLink(email, match.url)
          .then(function(result) {
            history.replace('/'); // <-- replace === redirect
          })
          .catch(function(error) {
            console.log('error ' + error);
          });
      }
    };

    testEmailAuth();
  }, []);

  return (
    <div className="EmailLink" />
  );
};
user_86908570

This piece of code is not located inside Router provider for <Redirect to="/" /> to work.

If you cannot put this code inside filed that is wrapped with Router provider you can make instance for router and use it anywhere in your application:

Also you need to provide your router provider with this instance of browser history

App.jsx

import { createBrowserHistory } from 'history';

export const browserHistory = createBrowserHistory();

const App = () => {
  return <Router history={browserHistory}>...</Router>;
};

Later on you can use it in your code:

import { browserHistory } from 'App';

firebase
  .auth()
  .signInWithEmailLink(email, window.location.href)
  .then(function (result) {
    window.localStorage.removeItem('emailForSignIn');
    browserHistory.push('/');
  })
  .catch(function (error) {
    console.log('error ' + error);
  });

You also need to provide this instance of browserHistory inside your router:

user_39555570

As the documentation says:

Rendering a will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.

Example:

function App() {
  const [redirect, setRedirect] = useState(null);

  const someFunction = () => {
    //Set redirect to display Redirect and go to /
    setRedirect("/");
  };

  return redirect ? (
    <Redirect to={redirect} />
  ) : (
    <div>{/** rest of your app */}</div>
  );
}
user_26069920
Related