Migrating MEAN web application (ExpressJS+MongoDB+AngularJS) to Kinde
I want to integrate a username+password along with google SSO in my web application.
My frontend is built using AngularJS
My backend is built using ExpressJS
I also store my data in MongoDB
I have a custom login page, in which I can either let the user connect via their username & password or they can Continue with Google.
Here's additional info regarding my app:
There are 3 user roles - admin, roleA, roleB
roleA can create roleB users, meaning they can create a username/password for them to login with
Only admin can create roleA users
There shouldn't be a sign up/register options, so a user (roleA or roleB) can only sign/log in if they have a username & password (or later with Google SSO)
Currently:
1) When a user logs in via their username & password, a JWT token is generated and stored in their user document in the database.
2) The backend responds with the user role + token which is stored in the localStorage in the Frontend.
3) Every request from the frontend contains the token in the headers (as bearer) and the backend verifies it using a middleware.
How do I migrate this process to Kinde? I tried asking KindeAI, but it confused me a bit
Couple of questions:
1) Do I need to add an application for both the Backend and Frontend? If so, which "technology" do I use for the Frontend application?
2) Since I have a custom login page, and I want my backend to handle requests. Is there anything special I need to do in the frontend with regards to Kinde SDK/API calls?
3) How do I setup Kinde in my backend if I have my main entry point app.js call a function in another script (routers/index.js) to initialize (app.use) all endpoints?
4) What do I need to do for a user to be able to login? The flow is: User logs in via frontend -> frontend sends request to BACKEND_URL/login with username + password -> ?
3 Replies
1. I personally would use Kinde on the backend with the Express SDK and then then handle storing the token in localStorage on the front end. There is a community Kinde Angular SDK https://github.com/luukhaijes/kinde-angular, or you can use the TS/JS SDK if you choose to go down that path.
2. You can have a custom sign in page using where you can handle backend requests before starting the auth flow with Kinde. Read more about custom sign in here https://docs.kinde.com/authenticate/custom-configurations/custom-authentication-pages/ and https://kinde.com/blog/engineering/how-to-create-a-custom-sign-in-sign-up-form/
3. Not 100% sure on this, but I can grab someone more familiar with Express to help out if needed.
4. Handle the auth endpoints in your backend and then redirect to those endpoints from your front end.
Hope that helps, if it didn't let me know and I can try again or grab another team member to have a look at your query!
Kinde docs
Custom sign-up and sign-in pages
Our developer tools provide everything you need to get started with Kinde.
Kinde Blog
How to create a custom sign-in/sign-up form
If you're familiar with Kinde, you've likely seen the default sign-in template that appears upon clicking the sign-in button. While this template is customizable, it doesn't offer the full flexibility that many developers crave.
I went over the ExpressJS docs & starter kit, and I think I don't have a proper understanding of them. I'll give it a try again
If it doesn't work, would it be possible to setup a 15-30 minutes video meeting so that I can demonstrate my problems, and maybe that would simplify matters?
Hi @Ricer Let me know if you need to have this call and we can set it up