Put these variables in a .env.local file in the root of your Next.js app. You can find these variables on your Kinde Settings > Applications > [Your app] > View details page.
KINDE_CLIENT_ID - Your business’s unique ID on Kinde
KINDE_CLIENT_SECRET - Your business’s secret key (do not share)
KINDE_ISSUER_URL - your kinde domain
KINDE_SITE_URL - where your app is running
KINDE_POST_LOGOUT_REDIRECT_URL - where you want users to be redirected to after logging out. Make sure this URL is under your allowed logout redirect URLs.
KINDE_POST_LOGIN_REDIRECT_URL - where you want users to be redirected to after authenticating.
KINDE_AUDIENCE - optional - a whitespace separated list of audiences to populate the aud claim in the token.
Replace the information in the example with your own information. You might also set different URLs depending where your project is running. They need to match the callback URLs you entered in Kinde, above.
If you want to redirect users to a certain page after logging in, you can set the KINDE_POST_LOGIN_REDIRECT_URL environment variable in your .env.local file.
Dynamic redirect
You can also set a postLoginRedirectURL parameter to tell us where to redirect after authenticating.
This appends post_login_redirect_url to the search params when redirecting to Kinde Auth. You can achieve the same result as above, like this:
It’s likely that your application will have both pages that are publicly available and private ones which should only be available to logged in users. There are multiple ways you can protect pages with Kinde Auth.
On the page you want to protect, you can check if the user is authenticated and then handle it right then and there by grabbing the Kinde Auth data.
In Server Components you can get the Kinde Auth data by using the getKindeServerSession helper
In Client Components you can get the Kinde Auth Data using the useKindeBrowserClient helper
In the example above, we show different content based on whether or not the user is authenticated. If you want to automatically send the user to the sign in screen, you can do something like the following:
If you want the user to be redirected back to that route after signing in, you can set post_login_redirect_url in the search params of the redirect.
You can also protect routes with Next.js middleware.
💡 As of right now the middleware in the app router does not work when trying to redirect to api/auth/login. This is because of Next.js caching which causes issues during authentication.
Default page protection
We provide a withAuth helper that will protect routes covered by the matcher. If the user is not authenticated then they are redirected to login and once they have logged in they will be redirected back to the protected page which they should now have access to.
Page protection with callback function after authorization
You can use the withAuth helper as shown below with a middleware callback function which has access to the req.kindeAuth object that exposes the token and user data.
Middleware options
There are options that can be passed into the middleware function to configure its functionality.
isReturnToCurrentPage - redirect the user back to the page they were trying to access
loginPage - define the path of the login page (where the users are redirected to when not authenticated)
publicPaths - define the public paths
isAuthorized - define the criteria for authorization
Kinde data can be updated via the UI or with the Management API. To have these updates be reflected in your app, you will need to get the most up-to-date Kinde data and then refresh the tokens in your session.
To get the most up-to-date Kinde data in your session, use the refreshTokens helper function.
You 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.
You can have your users sign into a specific organization by setting the orgCode param in the LoginLink and RegisterLink components.
If the orgCode is not specified and the user belongs to multiple organizations, they will be prompted to choose which organization to sign into during the login or register flow.
UTM tags can be used with the LoginLink and RegisterLink components to track auth traffic from its origin. You can then track the tags on the Analytics dashboard from within the Kinde app.
You can set the language you wish your users to see when they hit the login flow by including the lang attribute as a part of the authUrlParams when using the LoginLink and RegisterLink components.
An audience is the intended recipient of an access token - for example the API for your application. The audience argument can be passed to the Kinde client to request an audience be added to the provided token.
You can request multiple audiences by providing a white space separated list
In the case you have a custom domain and you would like to start the authentication flow from a URL like auth.mysite.com and you want to redirect to a URL like app.mysite.com , all you have to do is set the KINDE_COOKIE_DOMAIN to match the domain.
If the URL you want to start the authentication flow from and the URL you want to redirect to don’t share the same domain, then this will not work.
Our Kinde NextJS SDK currently requires that these environment variables KINDE_SITE_URL, KINDE_POST_LOGOUT_REDIRECT_URL, and KINDE_POST_LOGIN_REDIRECT_URL are defined, and that the callback URLs and logout redirect URLs are added to your app in Kinde.
To add Vercel’s dynamically generated URLs you can either securely use our API to add them on the fly or you can use wildcard URLs. It should be noted that whilst wildcards are more convenient it is not as secure as explicitly adding the url to the allowlist via API as we outline below.
Add the following to your next.config.js.
This ensures Vercel uses its generated preview URLs to populate the three Kinde variables.
Make sure the above values match your application (e.g. “/dashboard” for KINDE_POST_LOGIN_REDIRECT_URL)
Also make sure variables are not set for the preview environment in your Vercel project. If they are, they will be overridden by the new variables in the next.config.js file.
Add callback URLs and logout redirect URLs to Kinde dynamically