2025-03-20 - Frontend Authentication with Redux

concept

• use both of javascript funtion and react
• use redux for trigger longin in user-detail
• trigger another tab is doesn't work for now because each tab has own store login work when use just one tab now
• if use more than one tab another tab must refresh to update login

Why use Redux

• Single page SPA will render only one time after fist mount component if nothing change like useState hook component will not re-render
• When authentication work done with login and redirect to current page and user-detail component that already mount before login
• User-detail component will not re-render becase it not anything change in component, So they can't see anythig set in local_storage
• If not have access_token component can not querry userId from backend
• If not have userId component can't querry user-detail
• To fix it use redux by change some property in reducer and user-detail will trigger it change by useSelecter then compoonent will re-render

Process

• fist, Component will call loginStart function then check accessToken and accessToken_expire from local storage before login with AWS cognito
• after login with AWS cognito will redirect to login component for get accessToken, accessToken_expire, refresh_token and set them in local_storage
• after everything set before redirect to current page componet will update loginStatus by isLogin property in user_detail reducer for trigger user-detail
• then redirect to current page

other

• User Detial
• Frontend Styles