Remix SDK
This SDK is for developers using Remix.
New to Kinde? Get started here.
Create a back end application in Kinde
Link to this sectionThe Remix SDK works with back end applications. Create one in Kinde. See Add and manage applications.
Install the Kinde Remix SDK into your Remix project
Link to this sectionSet callback URLs
Link to this section- In Kinde, go to Settings > Applications > [Your app] > View details.
- Add your callback URLs in the relevant fields. For example:
- Allowed callback URLs (also known as redirect URIs) - for example
http://localhost:3000/kinde-auth/callback
- Allowed logout redirect URLs - for example
http://localhost:3000
- Allowed callback URLs (also known as redirect URIs) - for example
- Select Save.
Set up environment variables
Link to this sectionWhile you are in your Kinde backend application, copy the Client ID and Client secret, redirect URLs, etc. Add these details to the Environment variables for your application.
.env
Set up authentication routes
Link to this sectionCreate this file app/routes/kinde-auth.$index.tsx
.
Authentication
Link to this sectionSign up and sign in
Link to this sectionAuthenticate users by redirecting them to /kinde-auth/login
and /kinde-auth/register
with the Remix <Link />
component.
Sign into organizations
To log into specific organizations you can specify the org_code
in the search params.
Internationalization
You can set the language you wish your users to see when they hit the login flow by including lang
in the search params.
Logout
Link to this sectionThis is implemented in much the same way as signing up or signing in. Use the remix <Link />
component to redirect users to /kinde-auth/logout
.
Protect routes
Link to this sectionIn the loader
, check if the user exists and then handle route protection there.
In this example we will redirect the user to sign in if there is no login data.
Return to a specific page after authentication
Link to this sectionAfter a user has logged following a redirect from a protected route, we usually want to send the user back to the page they were trying to access prior to logging in.
This can be achieved with the returnTo
search parameter added to the login/register url.
Kinde session data - getKindeSession()
Link to this sectionClaims
Link to this sectiongetClaim(claim, type)
: Fetches a specific claim from the user’s session based on the provided claim name and type. Returns an object with name
and value
properties, or null on error.
getClaimValue(claim, type)
: Similar to getClaim
, but retrieves only the claim’s value. Returns the value or null on error.
Authentication and user information
Link to this sectiongetToken()
: Retrieves the current access token from the session. Returns the token or null when the user is not authenticated or on error.
refreshTokens()
: Attempts to refresh the user’s access and refresh tokens. Returns true on success or throws an error.
isAuthenticated()
: Checks if a valid session exists, indicating a logged-in user. Returns true if authenticated, otherwise false.
getUser()
: Retrieves the user information associated with the current session. Returns a user object or null on error or if the user is not authenticated.
getUserProfile()
: Fetches the user’s profile details from Kinde. Returns a user profile object or null on error or if the user is not authenticated.
Feature flags
Link to this sectiongetFlag(code, defaultValue, type)
: Retrieves a feature flag value by code. Optionally provides a default value and type for parsing the retrieved value. Returns the flag value or the default value on error.
getBooleanFlag(code, defaultValue)
: Retrieves a boolean feature flag.
getIntegerFlag(code, defaultValue)
: Retrieves an integer feature flag.
getStringFlag(code, defaultValue)
: Retrieves a string feature flag.
Permissions
Link to this sectiongetPermission(permission)
: Checks if a specific permission is granted to the user. Returns true if granted, false otherwise.
getPermissions()
: Retrieves all permissions associated with the user’s session. Returns an array of permission strings or an empty array on error.
Organizations
Link to this sectiongetOrganization()
: Fetches information about the user’s current organization. Returns an organization object or null on error.
getUserOrganizations()
: Retrieves a list of organizations the user belongs to. Returns an array of organization objects or an empty array on error.
Get up-to-date Kinde data
Link to this sectionTo get up-to-date Kinde data into your app you can use the refreshTokens
function in an action
function and then include the headers in the response.
Kinde Management API
Link to this sectionYou need to enable the application’s access to the Kinde Management API. You can do this in Kinde by going to Settings > APIs > Kinde Management API and then toggling on your Next.js application under the Applications tab.
To use our management API please see @kinde/management-api-js