[#25] [#36] [Backend] As a user, I can automatically re-authenticate if my access token expires [Backend] As a user, when I am unauthenticated I can see the Login page [#24] [Backend] As a user, when I am authenticated I can see my profile image at the top of all pages

[liamstevens111]

• Close [Backend] As a user, I can automatically re-authenticate if my access token expires #36
• Close [Backend] As a user, when I am unauthenticated I can see the Login page #25
• Close [Backend] As a user, when I am authenticated I can see my profile image at the top of all pages #24

What happened 👀

• Include access_token in Authorization header on all requests
• Request and store new acces_token using refresh token upon 401 error, if token doesn't exist then redirect to login page.
• Create Context for the User
• Set the user in context on successful login requests
• Protected routes

I have some Tests for Axios Interceptors (in requestManager) but I couldn't mock the Interceptor for fetching new token using refresh in RequestManager on error response. For some reason I could not assert the storage was called with the new access token, it kept saying it wasn't called because the re-fetch for new token errors out. it's situated on line 165 in requestManager.test.ts with xit

Insight 📝

• UseContextOutlet was removed and replaced with passing the User straight to the new header component which wraps the outlet in [#19] [UI] As a user, when I am authenticated I can see the company logo and my profile image at the top of pages [#18] [#22] As a user, I can logout #39

Proof Of Work 📹

Show us the implementation: screenshots, GIFs, etc.

[netlify]

✅ Deploy Preview for moonlit-buttercream-05cb2f ready!

Name	Link
🔨 Latest commit	ad66389
🔍 Latest deploy log	https://app.netlify.com/sites/moonlit-buttercream-05cb2f/deploys/63f8802a524199000866112c
😎 Deploy Preview	https://deploy-preview-34--moonlit-buttercream-05cb2f.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

🚀 Deployed on https://641a61a1aa884f2704e71ed2--moonlit-buttercream-05cb2f.netlify.app

[hanam1ni]

Should we rename this function? Because user won't login after running this function but get the new access token.

Suggested change

	static loginWithRefreshToken(refreshToken: string) {
	static refreshAccessToken(refreshToken: string) {
	static refreshUserToken(refreshToken: string) {

[liamstevens111]

I named it this because the only difference between the login and refresh-token endpoint is we are sending a refresh_token instead of email/password, otherwise endpoint and response are identical.

I also deemed "login" just to be storing token in localstorage from endpoint response which is what both do.

Do you still think it's better to change it?

[hanam1ni]

In my opinion, the user needs to log in with their email/password first before they get a refresh token. The user can't initially log in with a refresh token. So to get a new access token, it sounds like the user refreshes the token, not re-login.
Anyway I don't have a strong opinion about this one, I am fine with both name 👍

[liamstevens111]

I didn't think of that - you're right there's no way to get a refresh_token without logging in first, so I will change the name 👍 @hanam1ni

[liamstevens111]

As authAdapter changed to all be inside surveyAdapter in the latest survey list PR i have included it here instead:
66a6f8c

@hanam1ni fyi