User authentication status logic

[adyra]

I know this is just a simple app for tutorial, but how the ui check if user is authenticated is a bit annoy me . It's not necessary to create a flag in sessionStorage indicated that user is authenticated, while you already use cookie as authentication method. Currently when i delete flag value in sessionStorage, user will marked as not authenticated and must relogin, meanwhile actually we still can access the rest api method because cookie still exist

My suggestion is, server need to create a rest api method to check user's authenticated status by checking it's cookie, and then UI can consume this method to define user status.

[ktutnik]

FYI: we can call /api/v1/users/me to check if user is login or not. The API will give 403 response to indicate the user is not login.

BTW, saving session state in sessionStorage is good to keep the login state persistent, when the browser refreshed it prevent the app to check to server if user login or not. Welcome for PR if you have better idea. 👍

[adyra]

I'm not React enthusiasm 😄 so I cant make PR, but I interest to rewrite this on Vue.
I'm apologize, I should not bring this issue at first time, because this is tutorial about plumier social login implementation, not about authentication security 😃. I can argue a lot about this, but I think that will be out of context. Good job on tutorial and also Plumier 👍

[ktutnik]

I agree with @adyra , the issue using sessionStorage for login state is we need to do sync between server side cookie and the sessionStorage life time, which a little bit tricky to maintain.

The ideal way to solve this issue is using server side rendering, because only server knows if user login or not. But doing SSR with create-react-app is not an easy effort.

I will keep this issue open for a moment until I figure it out.

@adyra will help create example in VueJS. Yey!