Redirection after new user created to create his/her profile

1

Hello,
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?

2

Hey there,

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

3

Thanks for your response. Yes i am using React Router

4

Alright,

so react-router has a Redirect component.

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

Example:

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

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.

6

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

7

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?
Thanks

8

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

9

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.

10

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, ...rest }) => {
	const { isAuthenticated, loading } = useContext(AuthContext);

	return (
		<Route
			{...rest}
			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

11

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

12

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

if (isAuthenticated && !loading) {
  history.push('/<your-home-page-here>');
}
13

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

14

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

15

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

16

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
17

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

1 Like
18

My shift is just over now!

1 Like
19

I will try it and i will be back, thanks

20

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: