Redirection after new user created to create his/her profile

In my app new user create his/her account, then he/she will redirect to login page and then he/she has to redirect to “Create UserProfile” page to create his /her profile. However, if the user has already his/her profile, he/she has to redirect to “Dashboard” page. How can I do it? by the way I am using React js . Can someone give me any help or suggestion?

Hey there,

do you use a router, e.g. React Router?

Thanks for your response. Yes i am using React Router


so react-router has a Redirect component.

If you create a “logic tree”, I think you are able to solve this.


create account => success => redirect to login => ...
create account => failure => ...

I used Redirect Component already. I haven’t a problem to redirect to login page. I will try to explain my problem. I have userRegister, userLogin, Dashboard, addUserProfile components. So when a new user register, it will redirect to login and then after login I want to redirect to addUserProfile page and then after add his profile, it will redirect to Dashboard page. (this i want only for new users). However, for users already registered, they will login and redirect directly to Dashboard page, not to addUserProfile page.

so what is the difference between these two logical chains?
And how can you track the difference?

the first chain(i.e. redirect to addUserProfile page): i need that when someone registered, he has to create his profile before he will access different functionality in the application.
the second chain(i.e. redirect to Dashboard page) : here the user has his profile and he can access different functionality of the app. Because of that, i need that redirect to Dashboard page. Do you get my idea? or is it not clear?

so how can you track the difference between these two logical chains?

Normally i tried to solve by using set and get item of localstorage in Login page, but I couldn’t. I was looking for when the user connected the first time, redirect to addUserProfile page otherwise it redirect to Dashboard; however i didn’t find any solution.

What I have done in my previous project is create a seperate component called PrivateRoute. The route will only be accesible if user is authenticated:

import React, { useContext } from 'react';
import { Route, Redirect } from 'react-router-dom';
import AuthContext from '../../context/auth/authContext';

const PrivateRoute = ({ component: Component, }) => {
	const { isAuthenticated, loading } = useContext(AuthContext);

	return (
			render={props =>
				!isAuthenticated && !loading ? (
					<Redirect to='/login' />
				) : (
					<Component {...props} />

export default PrivateRoute;

And then I import this and use it the same way I use Router. Just replace Router with PrivateRouter.

(btw this is Brad Traversy’s method

So how about setting a flag like hasRegisteredJustNow after registering and checking for this flag?

And then in my Login or Register page I just use the same AuthContext, and have a

if (isAuthenticated && !loading) {

" hasRegisteredJustNow", I have no idea about flag. Can you give me a clue about it?

Thanks for your response:
I used this, it is similar to you:
const ProtectedRoute = ({component:Component,}) => { return <Route {} render={(props)=> { return localStorage.getItem('token') ? <Component {...props} /> : <Redirect to="/login" /> }} /> }

Ok, then you can have a Context like isAuthenticated and check for that in your Login component.

Just like I mentioned above…

I think this is what @miku86 was suggesting with flag

hasRegisteredJustNow would only be a custom boolean that lives in your state, e.g. in a Context or Redux or some other state management.

1 Like

@miku86 you’re everywhere lol :smiley: Leave some for me to answer as well :stuck_out_tongue_winking_eye:

1 Like

My shift is just over now!

1 Like

I will try it and i will be back, thanks

Oh you guys have shifts? Did not know that. Awesome work from freeCodeCamp btw! I learnt a lot of my basics from here…

Brad Traversy for more advanced concepts :smiley: