kinde-oss / kinde-auth-react

Kinde React SDK for frontend authentication flows

Kinde React

The Kinde SDK for React.

You can also use the React starter kit here.

Documentation

Please refer to the Kinde React SDK document.

Publishing

The core team handles publishing.

To publish a new package version, use the “Release and Publish to NPM” action in the “Actions” tab.

Contributing

Please refer to Kinde’s contributing guidelines.

Playground

To create the playground run npm run dev:prepare

This will clone the React starter kit into a /playground directory and reference the SDK via npm link.

You will need to add your Kinde credentials to the generated .env file inside /playground

npm run dev will load up the playground on http://localhost:3000

License

By contributing to Kinde, you agree that your contributions will be licensed under its MIT License.

kinde-auth-react's Issues

Question: How to get access token outside react component?

Prerequisites

• I have searched the repository’s issues and the Kinde community to ensure my documentation issue isn’t a duplicate
• I have read the contributing guidelines
• I agree to the terms within the code of conduct

How can we improve the docs or what is missing?

Hi, I am using Kinde react library that exposes useKindeAuth hook to access kinde related functions and properties.

What if I want to access the properties and functions outside of the react component for example in a common http interceptor for http requests?

PS: I tried joining the slack community to ask this question but I wasn't able to log in using my personal account. It allows users with domain kinde.com or devsinc.com.

Provide extra context, such as what you were trying to do and your requirements

Want to access the token outside the react component. How do I do that?

If the docs page already exists, please provide a link

https://kinde.com/docs/developer-tools/react-sdk/

Bug: problem with package's depedency "@kinde-oss/kinde-auth-pkce-js".

Prerequisites

• I have searched the repository’s issues and Kinde community to ensure my issue isn’t a duplicate
• I have checked the latest version of the library to replicate my issue
• I have read the contributing guidelines
• I agree to the terms within the code of conduct

Describe the issue

error: unhandledRejection: Error [ERR_REQUIRE_ESM]: require() of ES Module node_modules/@kinde-oss/kinde-auth-pkce-js/dist/kinde-auth-pkce-js.umd.min.js from node_modules/@kinde-oss/kinde-auth-react/dist/kinde-auth-react.umd.min.js not supported. kinde-auth-pkce-js.umd.min.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename kinde-auth-pkce-js.umd.min.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/diar_personal/dashboard/node_modules/@kinde-oss/kinde-auth-pkce-js/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

Library URL

"https://github.com/kinde-oss/kinde-auth-react"

Library version

"^3.0.21"

Operating system(s)

Ubuntu

Operating system version(s)

Ubuntu 20.04

Further environment details

No response

Reproducible test case URL

No response

Additional information

No response

Feature request: Starter kit for Remix

Prerequisites

• I have searched the repository’s issues and Kinde community to ensure my feature request isn’t a duplicate
• I have read the contributing guidelines
• I agree to the terms in the code of conduct

What is the problem you’re trying to solve?

I'm working on a POC using Remix and I'd like to integrate Kinde.

What solution would you like to see?

A starter kit for Remix showing best practice for authenticating users, determining if the user is authenticated in the loader and action functions on the backend, etc.

Additional information

This could already be possible using the existing React starter kit but I've learned over the years to never try to implement security yourself. An example how to do it right from the experts at Kinde would be great. Thanks.

Props required by KindeProvider are optional in Kinde client and hook is missing methods

👋

I noticed while implementing this package that in the docs (unless I'm misunderstanding something) the only required props are domain and logoutUri where as in the TypeScript types for this package, all the props are required

// @kinde-oss/kinde-auth-react
type KindeProviderProps = {
    audience: string;
    scope: string;
    clientId: string;
    domain: string;
    logoutUri: string;
    redirectUri: string;
    children: react.ReactNode;
    isDangerouslyUseLocalStorage?: boolean;
    onRedirectCallback?: () => void;
};

then upon looking at the types for the kinde-oss/kinde-auth-pkce-js client, this is it's interface

// @kinde-oss/kinde-auth-pkce-js
export type KindeClientOptions = {
  audience?: string;
  client_id?: string;
  redirect_uri: string;
  domain: string;
  is_dangerously_use_local_storage?: boolean;
  logout_uri?: string;
  on_redirect_callback?: (user: KindeUser, appState?: any) => void;
  scope?: string;
  _framework?: string;
  _frameworkVersion?: string;
};

I think that @kinde-oss/kinde-auth-react's types should be corrected to match your clients interface and so the docs align with the types?

// suggested changes to @kinde-oss/kinde-auth-react
type KindeProviderProps = {
    audience?: string;
    scope?: string;
    clientId?: string;
    domain: string;
    logoutUri?: string;
    redirectUri: string;
    children: react.ReactNode;
    isDangerouslyUseLocalStorage?: boolean;
    onRedirectCallback?: () => void;
};

Documentation issue: Add starter kit link

Prerequisites

• I have searched the repository’s issues and the Kinde community to ensure my documentation issue isn’t a duplicate
• I have read the contributing guidelines
• I agree to the terms within the code of conduct

How can we improve the docs or what is missing?

According to the following Kinde OSS template, there should be a link to the related starter kit (if it exists): https://github.com/kinde-oss/kinde-oss-repo-template/blob/main/README_template_non-generator.md

Provide extra context, such as what you were trying to do and your requirements

N/A

If the docs page already exists, please provide a link

No response