Kinde•6mo ago

Confused about Kinde implementation with Node/Express on the backend and React on the frontend

I wanted to use Kinde for auth for a real estate tool that I am building. I am using JWTs with a refresh token stored in a http only cookie. I wanted to use Kinde for signing in and up. What would be the flow between the frontend and backend for this

1 Reply

onderay•6mo ago

Hey Joshua, here are some general high level tips on you could follow. To implement Kinde authentication with a Node/Express backend and a React frontend, you can follow these steps: Setup your Frontend Setup (React) in Kinde Run npm start and navigate to http://localhost:3000. Implement the login and register buttons to point to your backend API endpoints. Backend Setup (Node/Express) Install Kinde Node SDK: Add Kinde Node as a dependency: npm i @Kinde-oss/kinde-node and then config your env variables and callback URLs in Kinde. Initialize Kinde in Your Express App: Import and initialize Kinde in your app.js or index.js file:

javascript 
const kindeNode = require("@kinde-oss/kinde-node");

     let authenticate;

     (async () => {
       authenticate = await kindeNode(YOUR_KINDE_DOMAIN);
     })();

javascript 
const kindeNode = require("@kinde-oss/kinde-node");

     let authenticate;

     (async () => {
       authenticate = await kindeNode(YOUR_KINDE_DOMAIN);
     })();

Implement Login, Register, and Callback Routes: Implement the /login, /register, and /callback routes in your Express app:

const express = require('express');
const app = express();

     app.get("/login", async (req, res) => {
       const loginUrl = await kindeClient.login(sessionManager);
       return res.redirect(loginUrl.toString());
     });

     app.get("/register", async (req, res) => {
       const registerUrl = await kindeClient.register(sessionManager);
       return res.redirect(registerUrl.toString());
     });

     app.get("/callback", async (req, res) => {
       const url = new URL(${req.protocol}://${req.get("host")}${req.url});
       await kindeClient.handleRedirectToApp(sessionManager, url);
       return res.redirect("/");
     });

const express = require('express');
const app = express();

     app.get("/login", async (req, res) => {
       const loginUrl = await kindeClient.login(sessionManager);
       return res.redirect(loginUrl.toString());
     });

     app.get("/register", async (req, res) => {
       const registerUrl = await kindeClient.register(sessionManager);
       return res.redirect(registerUrl.toString());
     });

     app.get("/callback", async (req, res) => {
       const url = new URL(${req.protocol}://${req.get("host")}${req.url});
       await kindeClient.handleRedirectToApp(sessionManager, url);
       return res.redirect("/");
     });

Flow Between Frontend and Backend 1. User Initiates Login/Register: - The user clicks the login/register button on the React frontend, which redirects them to the corresponding backend API endpoint (/login or /register). 2. Redirect to Kinde: - The backend API endpoint redirects the user to Kinde for authentication. 3. Kinde Authentication: - The user authenticates on Kinde and is then redirected back to the backend API callback endpoint (/callback`). Handle Callback: The backend handles the callback, verifies the JWT, and creates a stateful session using a secure, same-site, httpOnly cookie. Frontend Receives Authentication State: The frontend can now make authenticated requests to the backend API, including the JWT in the Bearer header. For more detailed information, you can refer to the following documentation For more detailed information, you can refer to the following documentation: - Authenticating single-page apps (SPAs) with Kinde - Node/Express GraphQL

Kinde docs

Authenticating single-page apps (SPAs) with Kinde

Our developer tools provide everything you need to get started with Kinde.

Kinde docs

Node/Express GraphQL

Our developer tools provide everything you need to get started with Kinde.

Gaming

Programming

Confused about Kinde implementation with Node/Express on the backend and React on the frontend