oluwani
CCConvex Community
•Created by oluwani on 1/4/2025 in #show-and-tell
Implementing Role-based Access Control in a production-ready application (Kinde & Convex)
https://dev.to/sholajegede/part-2-master-authentication-and-role-based-access-control-rbac-with-kinde-and-convex-in-a-ch
In this guide, I dove into building a secure and scalable file-sharing platform powered by Next.js, Kinde Auth, Convex DB, Shadcn UI, and TypeScript.
This is a continuation of our journey with Kinde and Convex DB focusing on advanced Role-Based Access Control (RBAC) concepts, configuration, and implementation.
In Part 1, we integrated Kinde Auth and Convex DB with Next.js for passwordless authentication and basic RBAC. In this tutorial, we’ll expand on:
- Advanced RBAC concepts and use cases.
- Configuring roles and permissions in Kinde.
- Implementing RBAC in a production-ready app (e.g., a file-sharing platform).
1 replies
CCConvex Community
•Created by oluwani on 12/25/2024 in #show-and-tell
Convex & Kinde
This guide outlines the Kinde-specific setup for Convex, following a flow similar to the Convex & Clerk integration but focusing on how to integrate Kinde with Convex.
It addresses many of the questions raised by the Kinde developer community.
The tutorial provides clear, actionable steps for integrating Kinde authentication with Convex while adhering to best practices.
https://dev.to/sholajegede/convex-kinde-2pe1
Under the hood
The authentication flow looks like this under the hood:
1. The user clicks a register or login button.
2. The user is redirected to a hosted Kinde page where they sign up or log in via whatever method you configure in Kinde.
3. After a successful sign up or login, their details are sent through a webhook and stored securely in Convex, after which they are redirected immediately back to your page, or a different page which you configure via the Kinde postLoginRedirectURL prop.
4. The KindeProvider now knows that the user is authenticated.
5. The useKindeAuth and AuthTokenFetcher fetches an auth token from Kinde.
6. Then the react useEffect hook sets this token to a setAuth instance of Convex.
7. The ConvexProvider then passes this token down to your Convex backend to validate.
8. Your Convex backend retrieves the domain, clientId and redirectUri from Kinde to check that the token's signature is valid.
9. The ConvexProvider is notified of successful authentication, and now your entire application knows that the user is authenticated with Convex. useConvexAuth return isAuthenticated: true and the Authenticated component renders its children.
The configuration in the ConvexKindeProvider.tsx file takes care of refetching the token when needed to make sure the user stays authenticated with your backend
I look forward to your comments, questions and suggestions.
3 replies
CCConvex Community
•Created by oluwani on 12/22/2024 in #show-and-tell
Authentication and Role-Based Access Control (RBAC) with Convex and Kinde Auth
Hey everyone,
I recently published an article on dev.to titled "Part 1: Master Authentication and Role-Based Access Control (RBAC) with Kinde and Convex in a File-Sharing Application." In the tutorial, I demonstrate how to:
- Integrate Kinde for user authentication in a Next.js app.
- Support multiple authentication providers like Google and Facebook.
- Create protected routes with middleware to restrict access.
- Configure Convex for user data management.
- Use webhooks to sync authentication events between Kinde and Convex.
- Implement Role-Based Access Control to enhance security.
You can read the full article here: https://dev.to/sholajegede/part-1-master-authentication-and-role-based-access-control-rbac-with-kinde-and-convex-in-a-h3c
I hope you find it helpful for your projects!
1 replies