Sign up + sign in + forgot password functionality

[vygandas]

Some notes before digging deeper

• Sign in, sign up are implemented with tests
• Forgot password is implemented at 70%
• Access and refresh token handling needed
• Simple Organization blank record created on Sign Up
• Proper JWT handling
• Some small refactor on implementation to move out UI related toast and add more universal callback function
• All details below and in AC

---

What

The platform needs to have a complete email+password authentication system in place. Also, it should be thought through really well for future scaling. A lot of it has already been implemented, but it's not finished, and some parts are missing. This task is all about finishing it and implementing what's left. Refer to Acceptance Criteria to know what will be tested to consider this task complete and done.

Note: The next task will be to create an auth with a magic link and oAuth providers like Apple, Google, Facebook, Github, etc., so keep that in mind when designing the whole auth core.

Why

Well, probably all SaaS projects have a sign-up and sign-in and password reset. Without authentication, it would be quite complicated to get anything done. That's why we implement this core element of any SaaS project.

---

In addition, default organization for every new user

Every new user gets an organization silently created by default also. If developers need this functionality, it will be easily extendable. If it's unnecessary - they don't need to do anything about it - it will sit in the background.

For reference

For one email there should be one user entity. Users can be in one (by default) or invited to many organizations. The user has a separate profile per organization. That profile would hold a name, avatar, and other things that are related to that tied organization. This way, user authentication data is kept in one place, but identity per org is kept separate. Since this is a universal starter project, we can just guess how this can be used, but with this approach, we can be sure we can implement something like Jira, Trello, Hubspot, and DigitalOcean has, but also we will be able to keep it super simple, or even hide organization, and completely ignore it in the project if that's not needed.

Here's DigitalOcean example of multiple teams (here it's actually separate organizations with different owners, billing details and companies 😉)

This is not a design or something to do, it's just for context! ☝🏻

---

🔥 Acceptance Criteria

• Implementation like hooks and hook forms should be reusable (now it will be for React project, but after this is done, we will add React Native to support exactly the same functionality, so keep that in mind)
• On libs/impl, there should be no UI-related method calls - use callback functions and implement it on the app side (in this case, toast needs to be moved out)
• User can sign-up / register
• User can't sign-up with invalid details, and API will not accept invalid sign-up details (validation on frontend and backend using same DTO (that was the whole point to have DTOs in libs 😉 ))
• User can request a password change and receive an email with the link to reset it (with email template)
• Users request to change password is valid only for 15 min
• User can sign in to the account
• When the user signs in, the user will see the first name and last name printed
• When the user reloads the page, the user will see a protected dashboard instead of the login form (automatic check)
• If the user is not logged in, the user will not be able to access protected routes
• JWT is used for storing user ID and for authentication checks and is passed via request headers
• There's an access token and a refresh token - when the access token expires and the refresh token is set, it should refresh the access token
• User access token lifetime is 15 min (then it should be refreshed)
• Refresh token lifetime is 8 hours, and the lifetime is extended every time it refreshes the access token (so if a user is using the platform, it won't log out, but if the user is not using it, after a longer period of time, it will get logged out completely)
• All configuration variables should be stored in configs dir
• User can manually log out, which will clear access-token and refresh-token from local storage and from the database
• On the frontend, it's just simple inputs without additional visual styling, tho groups should be properly wrapped
• When a user creates an account, an organization also is created; the organization will not have any details but will only be tied to the user via many-to-many relationships, and the user role is set to "owner". I'd add roles in the many-to-many middle table. (Users can own many organizations also can be invited to other organizations with different access levels; that's why it's many-to-many).
• Every method created has to be covered with tests where it is meaningful (.spec.ts)
• Every API call has to have e2e test (https://nx.dev/nx-api/cypress)
• Every frontend page has to have e2e test to check proper rendering
• Unit and e2e test are running on every commit to PR

[ahmed-e-elhor]

So you need a backend developer to solve this issue ?

[vygandas]

So you need a backend developer to solve this issue ?

@ahmed-e-elhor, technically it's a full stack. 🤷‍♂️

[Shreyansh-kankane]

Sir, Do you want to add authentication and authorization feature via Google, Github, or Facebook signIn/up, Please correct me If I am wrong Basically you want to add Role Base Authentication 1) user signup, user attached to some default organization with details as null initially 1.1) user can add other organization 2) user signIn to different Organization for which they belongs to. 3) Forget Password via email verification.

and rest features you mentioned above

[vygandas]

Sir, Do you want to add authentication and authorization feature via Google, Github, or Facebook signIn/up, Please correct me If I am wrong Basically you want to add Role Base Authentication

1. user signup, user attached to some default organization with details as null initially 1.1) user can add other organization
2. user signIn to different Organization for which they belongs to.
3. Forget Password via email verification.

and rest features you mentioned above

No. Please read again carefully. All the details are in there. I've also provided a lot of details for context so it would be easier to understand the large picture of the task and the overall goal we want to reach.

oAuth implementation will be the next step, which is not in the scope of this issue. Need to implement base authentication completely first.

In this case, even tho there's quite a lot of writing done for the organization, it should be relatively easy to implement that - just create an organization for a new user, tie it together on the relations table with the default role name and that's it. Fast one 😉 Oh also, there's no UI for organizations, it's just making a record.

Regarding roles - it's also out of the scope of this issue. It will be needed, but not at this time.

[suneox]

AC scope too much, I think should be separate to 3 task sign-in sign-up forgot password

[vygandas]

@suneox well, it's merged into one, because sign up works, sign in also works, forgot password - sends email with code, sets in db. Practically it's more work on tokens, refresh, making sure it's all nice. It also has tests coverage, quite extensive.

[vygandas]

https://github.com/cortip/isomera/tree/main/apps/api/src/auth

[ahmed-e-elhor]

If You can provide more context on the e2e tests, and an example of the front end work required for this task I am ready to join

[vygandas]

@ahmed-e-elhor , please ask more specifically what you're interested in. e2e is e2e :) Open to suggestions and ideas, too. So far, current e2e is what NX generated by default, so nobody really messed with those at all.

Regarding frontend - can just follow the same "design" as it was done. I mean, there's no design at all, 0 lines of CSS :) The whole point is to get it working and have a good/smart/proper components structure.

[vygandas]

Dropping e2e from this task. A bit of an overkill 🤓

[PhamAnhHoang]

• When the access token expires, the API will return a status code of 401. When the client receives this status code, it will call the API to renew both the access token and the refresh token. All pending requests will be added to the queue. Once the access token is refreshed, the client will automatically execute these pending requests.
• After a successful login, the API will return the default organization and the user profile within this organization. The client will save the organization to a cookie or local storage. Subsequently, every API call made by the client will include the organization id as a parameter. @vygandas

[vygandas]

@PhamAnhHoang, yeah, it makes sense. Of course, you would need to handle when 401 means actually logged out user, not to get into a loop of refresh attempts. And not forget everything else on the acceptance criteria 😉

[PhamAnhHoang]

I saw your post on upwork. Can I contribute to this issue? @vygandas

[vygandas]

@PhamAnhHoang, how long this will take, what do you think? It's important for me that this ticket won't get hanging for too long.

[PhamAnhHoang]

You can tell me your desired deadline and I will try my best to do it @vygandas

[vygandas]

@PhamAnhHoang , well, it's not a very small task and I don't know how much time you will spend daily, that's why you're the best who can tell me when you think you'd be done with it.

[PhamAnhHoang]

I think it will take around 40 hours, so I can complete this task on Monday,

[vygandas]

@PhamAnhHoang please apply on upwork so I could send an offer

[PhamAnhHoang]

This is my Upwork profile: https://www.upwork.com/freelancers/~017c46c5e110925052. I can’t see your post anymore. Can you message me? @vygandas

[vygandas]

@PhamAnhHoang invitation sent ✅