✨ 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.