Redirecting to a different route on login

Hey guys, I’m building a react application and I’m using react-router to achieve mpa.
So I have a home page at “/” route and it has a navbar with login button. When Users Login I want to redirect them to “/products” route which I have specified using React Router. But If I provide as Allowed Callback URL’s it throws me an error page during login. However If I only set as Callback URL it works just fine.But it redirects logged in user again to home page(I only want authenticated users to visit the products route) Please help me with this problem.

Hi @subramanya11rao,

Welcome to the Auth0 Community!

The error you observed is expected since is not a valid URI.

Instead, please use for your Allowed Callback URL.

Please let me know if you have any further questions.


Thank you @rueben for your reply, but it still doesn’t work. Let me explain you what I’m trying to achieve so that you can help me. I have a home component which is provided at “/”. Within this home component, I have a navbar that contains Login Button that is as follows:-

<button onClick={() => loginWithRedirect({
                                            screen_hint: 'signup',
                                            appState: {
                                                returnTo: '/products'
                                        })} className="bg-indigo-500 text-white px-6 py-2.5 font-semibold rounded focus:outline-none">Login</button>

Once a user log in I want him to display products(a component) which is available at “/products” route which I’ve defined using react-router-dom
I referred to this article to define my protected route

and I’ve defined my products route as follows:-

        <Route exact path="/" component={Home} />
        <PrivateRoute path="/products" component={Products} />

(following the above tutorial from that article)

Also I’ve defined this function

const onRedirectCallback = (appState) => {
    const history = useHistory();
      appState && appState.returnTo
        ? appState.returnTo
        : window.location.pathname

in my main.jsx (index.jsx). So If everything is right once user logon via login button on home he should be redirected to /products using loginWithRedirect and onRedirectCallback provided by auth0. Login , protecting the route, generating the token and everything is working fine but once I logon it redirects me again to home page. Please help me.

My main.jsx for your reference

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { BrowserRouter } from 'react-router-dom';
import { useHistory } from 'react-router-dom';
import './index.css'
import { Auth0Provider } from "@auth0/auth0-react";

const onRedirectCallback = (appState) => {
    const history = useHistory();
      appState && appState.returnTo
        ? appState.returnTo
        : window.location.pathname

        domain= MY_DOMAIN
        clientId= MY_CLIENT_ID
            <App />

I even specified redirectUri as explicitely so that I can test. It works perfectly but it generates unlimited tokens on login and my product component does’nt dispalay. Please help me, I really want to use auth0 its such a great service and it provides me whole lot of options along with complete customization. I really dont want to implement authentication myself using node JS , Express and JWT. Please help me :pray: :pleading_face:

I can share with you entire code if you want. But please do help me.

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