✨ Frontend: Implement JWE-based Authentication with RTK Query

[samiurprapon]

✨ Feature Request Overview

Implement authentication functionalities using JWE-based tokens, which differ from traditional JWT. It would be preferable to utilize RTK Query for this implementation.

---

🔍 Background Context

To enhance our application's security, we need a robust authentication mechanism. JWE (JSON Web Encryption) provides an added layer of security by encrypting the token payload, crucial for protecting sensitive information. This feature should support both access and refresh tokens for effective user session management.

---

📂 Scope

• 📱 Android
• 🖥️ Backend
• 🖼️ Frontend
• 📝 Documentation

🎨 Design & Mockup

• N/A

---

💡 Implementation Details

• Create backend functionality for issuing JWE-based access and refresh tokens. [ Similar to JWT ]
• Implement endpoints for token refreshing and validity verification.
• Use RTK Query for handling authentication workflows and state management.

---

📘 Relevant Resources

• JWE Specification
• RTK Query Documentation

---

🛠️ Expected Outcome

Expected Result:
A secure authentication system using JWE-based access and refresh tokens, integrated with RTK Query for seamless data fetching and management.

---

📝 Additional Information

• Please ensure to follow security best practices during implementation.
• Consider adding tests to verify the functionality and security of the authentication mechanism.

[d-a-ve]

Hi, this looks like an interesting issue. I see from the backend dir that the auth apis are ready.

I can take this.

Where are you looking at storing the jwe tokens? I see the current implentation is using localStorage

[samiurprapon]

hey @d-a-ve ,
Yes for now, localstorage is being used to store the tokens. you can always implement any better way to store it. In the next version authentication process will use we bsockets to add an extra layer for better security. if you find this interesting you can implement it and send a PR

[d-a-ve]

For the tokens, it can be implemented using cookies on the backend side so the frontend never handles the tokens.

Any error that it receives, it just displays it to the user. We can also add that depending on the type of error we can do a silent token refresh among other things.

The APIs will send back the tokens once it's hit right?

P.S: I am talking about the web side of things, I saw after my initial comment that there's an android app

[samiurprapon]

@d-a-ve, I think using Local Storage should work fine for now, and later on, I’m planning to add an extra layer with WebSockets to improve identity protection. If you're up for it, feel free to start working on the authentication process. I’ll aim to have a staging site up by Wednesday so we can showcase where the project is at.

[d-a-ve]

@samiurprapon okay. That's fine.

What I am supposed to work on is the frontend implementation only or work o the backend code too? I cannot write backend code as I am a frontend dev right now.

[samiurprapon]

@d-a-ve, you can go ahead and start with the frontend side. I’ll take care of the necessary APIs for your end. For now, you can structure the RTK query and everything using mock APIs. Once you’ve had a chance to dive in and if you're able to spend more time on this, I’d be happy to guide you through the backend implementation of Aether. Let me know what you think!

[d-a-ve]

@samiurprapon that's great, it sounds fine by me. You can assign it to me.

I will think deeply about what's needed and go through the documentation too.

[d-a-ve]

Hey @samiurprapon, I am sorry that I haven't given update since. I have been tied down at work, this past week has been hectic. It would reduce by next week and I can work on it.

If I can't, I will let you know too.

[samiurprapon]

Hi @d-a-ve , any update so far?

[d-a-ve]

Hey @samiurprapon, sorry that I didn't drop any update since. I have been busy still. I just got my plate a bit free up. I think I can still work on the frontend part of the auth. Is it too late? And has someone taken the backend part?

[d-a-ve]

Hey @samiurprapon I just forked and cloned the app, the frontend has too many styling solutions. I am seeing vanilla css, tailwind, and mui, what's the reason behind having 3 solutions?

Also, it seems the routing does not work. I tried moving to the auth page to see what's there but it's not working

[samiurprapon]

Hey @d-a-ve I saw the issue and wanted to chat about the styling approach. For the long term, I’m leaning towards SCSS over MUI, but if you’re comfortable using something else, I’m happy to incorporate that too!

I also noticed the routing issue, but right now, I’m focused on setting up a CI/CD pipeline for both the backend and front end for the Cloudflare deployment. If you have some time to take a look and could send a PR to fix the routing, that would be awesome!

[samiurprapon]

@d-a-ve I have fixed the routing issue.

[d-a-ve]

Hey @samiurprapon sorry for the late reply.

I am fine with any styling solution you prefer, my CSS is strong so regardless of the choice I believe I can work with it. I use tailwind most times but SASS will work too. I can definitely learn from your experience on that. The only problem I know I will run into will be naming the classes 😂😂, which we all have.

I am happy to hear you have fixed the routing issue, I will pull and take a look at it. I'm currently on a call so I can't right now but when I'm free I will do that.

For the CI/CD, is it cloud flare you are using for the deployment using wrangler and all those stuff? Or it's just for the CDN?

[samiurprapon]

Yes, will use Github Actions for the CI purposes. And initially use Cloudflare Pages instead of Vercel or Github Pages. Soon, use Cloudflare workers and Database like D1

[d-a-ve]

Yes, will use Github Actions for the CI purposes. And initially use Cloudflare Pages instead of Vercel or Github Pages. Soon, use Cloudflare workers and Database like D1

Okay, I haven't deployed to cloud flare pages before, it will work for an spa like this one yes?

Which part of the project will use the workers? The server? Isn't that a runtime that's different from nodejs?