Implementing Kinde to Express NodeJS typescript and Ionic Angular application
Hi, I am considering migrating over to Kinde. Let me explain my current implementation
8 Replies
I am using a JWT auth and any authentication is handled on the backend. When a user logges into my app I will send a JWT token and store them in local storage in my angular app and If a user makes any request I have a middleware on my API to check if the JWT provided in the Authentication header is valid or not
So i was thinking of doing something similar on Kinde where I store my JWT token in my angular app and everything is done on my API in terms of authentication
Great to hear that you are checking out Kinde!
Migrating to Kinde while maintaining a similar authentication flow as you've described is definitely possible. Kinde supports JWT (JSON Web Tokens) for secure data transmission, authentication, and authorization, which aligns well with your current implementation.
Here's how you can achieve a similar setup with Kinde:
Storing JWT in Your Angular App: After migrating to Kinde, when a user logs into your app, Kinde will issue a JWT token. You can store this token in local storage within your Angular app, just as you are doing now.
Middleware on Your API: Kinde uses JWTs for authentication and authorization, which means you can continue to use middleware on your API to check if the JWT provided in the Authorization header is valid. Kinde recommends using a library to verify your token. If you are using ExpressJS, for example, you can use Kinde's library or any library compatible with JWT tokens as recommended by the OpenID Foundation. This ensures that only authorized users and apps can access your regular web, native, or single-page applications by checking that tokens are valid and have not been tampered with, misused, or are expired.
Set Up Kinde for Your Backend: To securely call your backend API from your Angular app, ensure the access token is sent in the headers. Kinde documentation provides examples of how to do this, and while the examples are in React, the concept is the same for Angular. You will need to ensure the JWT is included in the Authorization header as a Bearer token when making requests to your API.
Verify Tokens on Your Backend: On the backend, you will need to verify the token when it hits your API. This involves checking the token's signature, claims, and ensuring it hasn't expired. Kinde's documentation on verifying JSON Web Tokens (JWTs) provides guidance on how to do this, including using libraries that can help with the verification process.
Let me know if these works for you
Alright so i only need to make changes on the api of mine right? My angular app remains untouched?
If so is there a quick start guide for express typescript? Also i would like to store user id from mongodb into kinde for reference
Correct, you need to ensure that your API can take the validated JWT tokens from Kinde.
Is there a quick start guide for this please?
We have an Express starterkit - https://github.com/kinde-starter-kits/expressjs-starter-kit but not 100% sure it has Typescript support.
You can send via API your user ID into Kinde as an External ID https://kinde.com/docs/build/about-id-tokens/#kinde-additional-claims
GitHub
GitHub - kinde-starter-kits/expressjs-starter-kit: Starter kit for ...
Starter kit for regular web apps served with Express - kinde-starter-kits/expressjs-starter-kit
Kinde Docs
ID tokens - Build on Kinde - Help center
Our developer tools provide everything you need to get started with Kinde.
Kinde Docs
TypeScript SDK - Developer tools - Help center
Our developer tools provide everything you need to get started with Kinde.
Certainly can, the TS SDK is more suited for the backend, so not sure how that will impact your setup.