Kinde with React Js
hey there i was wondering if it possible to handle authentication and authorization on react JS front-end and using express. son my back end will be storing the credentials in my database not on kinde cloud
3 Replies
Great question @Ishimwe Sage
On the front-end, you can use the Kinde React SDK to implement the login/register flow. This will redirect your users to Kinde for authentication, and then back to your site. You can set a callback to take place once your user is redirected back to your site from Kinde. The callback automatically passes in the user object and any application state you set prior to the redirect. Here's an example of how to use it:
import {useKindeAuth} from '@kinde-oss/kinde-auth-react';
...
const { login, register } = useKindeAuth();
...
<button onClick={register} type="button">Sign up</button>
<button onClick={login} type="button">Sign In</button>
On the back-end, you can use the Kinde NodeJS SDK to protect your API endpoints. When a request is made to your API, the SDK will verify the Bearer token sent with the API call matches the keys on your domain and prevent access to unauthorized users.
As for storing credentials in your own database, after a successful login, you can check if the user returned from Kinde is in your local database.
If not, you can add them to your local database. Here's an example of how to do it:
// /api/auth/success/route.ts
import {getKindeServerSession} from "@kinde-oss/kinde-auth-nextjs/server";
import {NextResponse} from "next/server";
export async function GET() {
const {getUser} = getKindeServerSession();
const user = await getUser();
if (!user || user == null || !user.id) {
throw new Error("something went wrong with authentication" + user);
}
// check if user exists
const dbUser = /* use user.id here and query your database to see if user exists */
// do something if user does not exist
if (!dbUser) {
/* write code to insert user to you database here */
}
return NextResponse.redirect("http://localhost:3000/");
}
Kinde will still handle the actual authentication process and manage the user's credentials.Thank you so much let me give it a try
No worries.
Shout if you come across any issues.