Kinde•3w ago

Support for Vue?

Hi, Is it correct noticed that Kinde as for now do not have support for Vue? Best regards Daniel

7 Replies

Hi Daniel, Thanks for reaching out! While Kinde doesn’t have a dedicated Vue SDK at the moment, you can still integrate Kinde authentication into your Vue applications using: 1. Kinde JavaScript SDK (kinde-auth-pkce-js) – A flexible option that works with Vue applications. 2. Kinde Nuxt Module – If you're using Nuxt.js (which is built on Vue), this module provides seamless integration. For more details, you can check our documentation: - JavaScript SDK - Nuxt Module If you have any further questions or need assistance, feel free to ask. We’re happy to help

GitHub

GitHub - kinde-oss/kinde-auth-pkce-js: Kinde vanilla JavaScript aut...

Kinde vanilla JavaScript authentication for SPAs using PKCE flows. Can be used with Vue / Angular or any JS framework - kinde-oss/kinde-auth-pkce-js

Kinde docs

Nuxt module

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

DanielOP•3w ago

Thank you. I will check it out. Is it easy to validate requests from frontend in a express backend using the Javascript SDK?

Claire Mahoney•3w ago

Yes, the Express SDK supports reading the bearer token from the incoming requests. We do also have our js-utils package which gives some storage mechanisms and helpers which will simplify things in your Vue setup. I would recommend looking at that over the PKCE SDK.

https://github.com/kinde-oss/js-utils

DanielOP•3w ago

Thank you 🙂 so you recommend me to check js-utils and not the vanilla using PKCE at all? js-utils for the Vue setup and Express SDK for the Express API?

Claire Mahoney•3w ago

Hi Daniel, Yes, for your Vue setup, we recommend using the @kinde-oss/js-utils package. It offers simplified storage mechanisms and helper functions that can make integrating Kinde into your Vue app smoother and more manageable than using the vanilla PKCE SDK directly. For your Express backend, the Kinde Express SDK is the right choice. It can validate Bearer tokens sent from the frontend and helps you easily secure your API endpoints. So to summarize: - Use js-utils for the Vue frontend. - Use the Express SDK for the backend API. Let me know if you need help setting things up — I’d be glad to walk you through any part of the integration

GitHub

GitHub - kinde-oss/kinde-node-express-api: Kinde JWT verification f...

Kinde JWT verification for Node Express apis. Contribute to kinde-oss/kinde-node-express-api development by creating an account on GitHub.

DanielOP•3w ago

Thanks a lot. Been putting this day going through this but I am totally stuck. I can't find the js-util way of getting a createKindeClient-object holding clientId, domain etc. :/ I must be missing some documentation but I have been searching and also asked my AI-fiend to do a deep search with no luck. I was aiming for something like this in my router to protect my routes in Vue 3 using a meta on specific routes:

router.beforeEach(async (to, from, next) => {
  if (to.meta.requiresAuth) {
    const isAuthenticated = await kindeClient.isAuthenticated();

    if (!isAuthenticated) {
      return kindeClient.login(); // redirect to Kinde login
    }
  }

  next(); // allow navigation
});

I have been playing around trying to figure out how to create a /utils/kinde.js:

// src/utils/kinde.js
import createKindeClient from '@kinde/js-utils';


export const kindeClient = createKindeClient({
  clientId: 'id_from_dashboard',
  domain: 'https://mydomain.kinde.com',
  redirectUri: 'http://localhost:5173/kinde-callback',
  logoutRedirectUri: 'http://localhost:5173',
  audience: 'https://api.mydomain.com/api' // optional, for securing API calls
});

After been digging around in the js-utils libary I fully understand that what i am looking for does not exist but can't get my head around whats the proper way to integrate it correctly

Claire Mahoney•3w ago

Hi Daniel, Thank you for your detailed follow-up and for taking the time to dive deep into the integration. You're absolutely right — the @kinde-oss/js-utils package currently doesn't expose a createKindeClient function in the same way as the PKCE SDK does. I can see how that would be a bit confusing, especially when trying to set up route protection as you've described in your Vue app. To ensure you're set up correctly and to provide the most accurate guidance, I’ll pass this along to our engineering team to review and confirm the recommended approach for your use case. I’ll keep you updated as soon as I hear back. Thanks again for your patience, and please feel free to share any additional context or code snippets you think might help

Gaming

Programming

Support for Vue?

Did you find this page helpful?