Redirecting to a different route on login

[subramanya11rao]

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 127.0.0.1:5173/products as Allowed Callback URL’s it throws me an error page during login. However If I only set http://127.0.0.1:5173/ 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.

[rueben.tiow]

Hi @subramanya11rao,

Welcome to the Auth0 Community!

@subramanya11rao

If I provide 127.0.0.1:5173/products as Allowed Callback URL’s it throws me an error page during login.

The error you observed is expected since 127.0.0.1:5173/products is not a valid URI.

Instead, please use http://127.0.0.1:5173/products for your Allowed Callback URL.

Please let me know if you have any further questions.

Thanks,
Rueben

[subramanya11rao]

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 https://thinkster.io/tutorials/auth0-react-login-and-user-profile/protect-the-profile-route

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

   <Switch>
        <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();
    history.push(
      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();
    history.push(
      appState && appState.returnTo
        ? appState.returnTo
        : window.location.pathname
    );
  };

ReactDOM.createRoot(document.getElementById('root')).render(
    <Auth0Provider
        domain= MY_DOMAIN
        clientId= MY_CLIENT_ID
        redirectUri={window.location.origin}
        onRedirectCallback={onRedirectCallback}
    >
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Auth0Provider>,
)

I even specified redirectUri as http://127.0.0.1:5173/products 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

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