# Redirecting to a different route on login

**URL:** <https://community.auth0.com/t/redirecting-to-a-different-route-on-login/97560>\
**Category:** Get Help\
**Tags:** other, test\
**Created:** [January 5, 2023, 3:19pm UTC](https://community.auth0.com/t/redirecting-to-a-different-route-on-login/97560 "2023-01-05T15:19:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![subramanya11rao](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/subramanya11rao/32/42314_2.png) [@subramanya11rao](https://community.auth0.com/u/subramanya11rao)\
**Post date:** [January 5, 2023, 3:19pm UTC](https://community.auth0.com/t/redirecting-to-a-different-route-on-login/97560/1 "2023-01-05T15:19:30Z")

</div>

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/](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.

---

<div class="post-metadata">

**Author:** ![rueben.tiow](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/rueben.tiow/32/11646_2.png) [@rueben.tiow](https://community.auth0.com/u/rueben.tiow)\
**Post date:** [January 5, 2023, 10:50pm UTC](https://community.auth0.com/t/redirecting-to-a-different-route-on-login/97560/3 "2023-01-05T22:50:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![subramanya11rao](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/subramanya11rao/32/42314_2.png) [@subramanya11rao](https://community.auth0.com/u/subramanya11rao)\
**Post date:** [January 6, 2023, 6:02am UTC](https://community.auth0.com/t/redirecting-to-a-different-route-on-login/97560/4 "2023-01-06T06:02:12Z")

</div>

Thank you [@rueben](https://community.auth0.com/u/rueben.tiow) 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:-

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

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

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

```

(following the above tutorial from that article)

Also I’ve defined this function

```auto
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

```auto
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](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!

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [January 20, 2023, 6:02am UTC](https://community.auth0.com/t/redirecting-to-a-different-route-on-login/97560/5 "2023-01-20T06:02:58Z")

</div>

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