Handling PassportJS authenticated user in the front-end

@60noypearl

If you’re using a REST API, then the server is stateless, which basically means that server requests happen without knowledge of the client’s state. Now the browser will store the cookie which can be used to authenticate the user with the session on server. Authentication is the process of identifying who the user is. Like when you show your picture ID at the bar, you’re authenticating that you are who you say you are (the picture) and are authorized to order a drink (age 21+). A session is like having your name on the list with the guy at the door so you don’t have to show your ID and wait in line like everyone else.

So the server will save the session which tells the server about the user, but the server doesn’t store the user’s state. That’s something that React can help with in your application. When a user requests and receives information from the server, you store that data in React’s state. In order to persist that data across all views, the data can be stored in high order component and shared as props through your various views.

But what if a user navigates to a different site and then comes back? That will wipe React’s state unless you store that state somehow in local memory. One way to do that is using the localStorage API where you can set and get data. When the user comes to your site, you can check the localStorage to see if their data is still there before grabbing it again from the server. If the data does get wiped, you still have the cookie in the browser that can be used to fetch the data again from the server without having the user log back in again. If the user clears their cookies, then they will have to log back in again.

@mones-cse

Yes, you should create a new app for each project since the app ID and app secret is needed for authentication. Facebook’s API requires a callback URL which matches the project domain in order to provide to provide the token and profile information on the user. If you’re developing locally you will need to temporarily set site URL to localhost to get working on your machine. Here’s the link to make a new app:

https://developers.facebook.com/apps

5 Likes