Welcome to the Kinde community

Updated 8 months ago

@KindeAI can help you out with it

@Glime can help you out with it
G
S
`
15 comments
I'm here to help! Could you please provide more details about the issue or question you have? This will help me give you the most accurate and helpful response.
@Glime Hey folks, a newbie dev here. Sorry in advance if this is not the right place to ask.

Can anyone help me figure out if Kinde's GitHub login setup by default provides code param that I can exchange with access token to authenticate my app on behalf of users? In my cookies by default with Kinde, I see access_token refresh_token but I'm not sure they can be used as an authorization header on Github API calls.

If not so, how should I handle the redirect process to manage the exchange? Setting up a callback URL directing to a route handler in my Github app would help?
Working on Next.js app router.
Yes, Kinde's GitHub login setup involves an OAuth flow that provides a code parameter, which you can exchange for an access token to authenticate your app on behalf of users. This process is part of the standard OAuth 2.0 authorization code grant flow, which is used by Kinde for authentication with external providers like GitHub.

When a user logs in via GitHub, Kinde will redirect the user back to your application with a code parameter in the URL. You need to capture this code and exchange it for an access token by making a POST request to the GitHub token endpoint. This access token can then be used as an authorization header in GitHub API calls.

To handle the redirect and exchange process in your Next.js app, you should:

  1. Set up a callback URL in your GitHub app and Kinde configuration. This URL is where GitHub will redirect users after they authorize your app.
  2. Implement a route handler in your Next.js app for the callback URL. This handler should capture the code parameter from the query string.
  3. Make a POST request from your route handler to the GitHub token endpoint to exchange the code for an access token. You'll need to include your GitHub app's client ID and client secret in this request.
Remember, the access_token and refresh_token you see in cookies are related to Kinde's authentication process and are not directly usable for GitHub API calls. You need to follow the OAuth flow to obtain a GitHub-specific access token.

For more details on implementing OAuth flows and handling redirects in Next.js, you might find the Next.js documentation and Kinde's developer resources helpful. Additionally, GitHub's OAuth documentation provides comprehensive guidance on the authorization code grant flow.
@Glime How can I capture the code parameter from the callback URL's query string?
To capture the code parameter from the callback URL's query string in your application, you will need to implement logic within your callback route handler. When Kinde redirects the user back to your application after authentication, the URL will include the code parameter as a query string. Here's a general approach to handle this:

  1. Identify the Callback URL: Ensure you have specified a callback URL in your Kinde application settings. This is the URL to which Kinde will redirect users after they authenticate, appending the code parameter along with any others you've specified, such as state.
  1. Implement Route Handler: In your application, implement a route handler for the callback URL. This handler will process incoming requests that include the code parameter.
  1. Extract the code Parameter: Within your route handler, extract the code parameter from the query string. The exact method to do this will depend on the backend framework or library you are using. For example, in Express.js for Node.js, you can access query parameters using req.query.code.
  1. Exchange the code for an Access Token: Once you have the code, you need to make a POST request to the Kinde token endpoint (https://<your_kinde_subdomain>.kinde.com/oauth/token) to exchange it for an access token. Include parameters such as client_id, client_secret, redirect_uri, grant_type (set to authorization_code), and the code you just captured.
Here's a simplified example using Express.js:
Plain Text
app.get('/api/auth/kinde_callback', async (req, res) => {
  const code = req.query.code;
  if (code) {
    try {
      // Exchange the code for an access token
      const response = await axios.post('https://<your_kinde_subdomain>.kinde.com/oauth/token', {
        client_id: '<your_kinde_client_id>',
        client_secret: '<your_kinde_client_secret>',
        grant_type: 'authorization_code',
        redirect_uri: '<your_app_redirect_url>',
        code: code,
      });
      const accessToken = response.data.access_token;
      // Use the access token as needed
    } catch (error) {
      console.error('Error exchanging code for token:', error);
      // Handle error
    }
  } else {
    // Handle the case where the code parameter is missing
  }
});


Remember to replace placeholders with your actual values and adjust the example to fit your specific backend framework or library.
@Glime Could you give an example with a Next.js 14 api route handler with fetch?
I'm sorry, but as of my last update, there isn't specific documentation or examples provided for Next.js 14 API route handlers with fetch in the context of Kinde integration. The provided documentation and examples primarily focus on Next.js up to version 13 and its integration with Kinde's authentication and management APIs.

For creating an API route handler in Next.js (applicable to versions including and prior to 13 as per the documentation), you typically define an async function that handles HTTP requests. Within this function, you can use the fetch API to make external HTTP requests. Here's a generic example that can be adapted for Next.js 14, assuming similar patterns hold:

Plain Text
// pages/api/example.js

export default async function handler(req, res) {
  // Example fetch request to an external API
  const response = await fetch('https://api.example.com/data', {
    method: 'GET', // or 'POST'
    headers: {
      'Content-Type': 'application/json',
      // Additional headers
    },
    // body: JSON.stringify(data), // if method is POST
  });

  if (!response.ok) {
    // Handle response error
    res.status(response.status).json({ error: 'Failed to fetch data' });
    return;
  }

  const data = await response.json();

  // Respond with fetched data
  res.status(200).json(data);
}


This example demonstrates how to create a simple API route in Next.js that makes a fetch request to an external API, processes the response, and returns the data to the client. Remember to replace 'https://api.example.com/data' with the actual URL you intend to fetch data from.

For Next.js 14 specific features or changes that might affect how API routes are created or handled, I recommend consulting the official Next.js documentation or community resources for the most current information.
@Glime Could you explain me how a social sign in and connected apps work on Kinde? Handle GitHub example and walk me through the whole setup step by step. I'm using Next.js with Typescript. Also answer the following:
Should I set Github on the authentication panel even if I'm using connected apps? Because if I don't the sign-in button won't appear in the page that login button directs. How these two work?
I've set the callback url of the connected app on my Github App but normal social sign-in Github also requires a callback url setup. What do I do?
Social sign-in and connected apps in Kinde serve two distinct purposes but can work together to enhance your application's functionality and user experience. Let's walk through how to set up GitHub as both a social sign-in method and a connected app in Kinde, especially focusing on a Next.js with TypeScript setup.

Social Sign-In with GitHub


Social sign-in allows users to sign up and sign in to your product using their GitHub credentials. This is a straightforward way to streamline the authentication process for your users.

  1. Enable GitHub Social Sign-In in Kinde:
    • Go to Kinde's dashboard, navigate to Settings > Authentication.
    • In the Social Connections section, select Add connection, choose GitHub, and then select Save.
    • Click on the GitHub tile, then select Configure.
    • Copy the Callback URL provided by Kinde. This URL is where GitHub will redirect users after they authenticate.
  1. Create a GitHub App:
    • Sign in to your GitHub account and navigate to Settings > Developer settings > GitHub Apps.
    • Select New GitHub App, fill in the necessary details, and paste the Kinde Callback URL into the Authorization callback URL field.
    • Select the Request user authorization (OAuth) during installation option.
    • After creating the app, copy the Client ID and Client Secret.
  1. Configure GitHub in Kinde:
    • Back in Kinde, under the GitHub configuration section, paste the Client ID and Client Secret you obtained from GitHub.
    • Select Save. Now, GitHub will appear as a sign-in option for your users.

Connected Apps with GitHub


Connected apps allow your application to interact with third-party services (like GitHub) on behalf of your users. This is useful for accessing or modifying resources in external services.
  1. Set Up a Machine to Machine Application:
    • Before adding GitHub as a connected app, set up a machine-to-machine application in Kinde for API access.
  1. Add GitHub as a Connected App in Kinde:
    • Go to Settings > Connected apps in Kinde.
    • Select Connect an app, choose GitHub, and then select Save.
    • Click Configure on the GitHub tile and copy the Provider to Kinde callback URL.
  1. Configure Your GitHub App for Connected Apps:
    • Use the same GitHub app you created for social sign-in or create a new one if necessary.
    • Paste the Provider to Kinde callback URL into the Authorization callback URL field in your GitHub app settings.
    • Copy the Client ID and Client Secret.
  1. Complete the Connection in Kinde:
    • Paste the Client ID and Client Secret from GitHub into the connected app configuration in Kinde.
    • Finish the setup by following the instructions provided by Kinde.

Integrating Both in Your Next.js App


  • Social Sign-In Button: To display the GitHub sign-in button, you must enable GitHub in the Authentication panel in Kinde. This ensures the button appears on the login page Kinde provides.
  • Handling Callbacks: Both the social sign-in and connected apps require a callback URL setup. You can use the same callback URL for both if you're using the same GitHub app for social sign-in and as a connected app. Ensure this URL is correctly configured in both Kinde and your GitHub app settings.
In summary, you should set up GitHub on the authentication panel to enable the sign-in button. For connected apps, the setup allows your application to interact with GitHub on behalf of your users. Using the same GitHub app for both functionalities is possible, and you can use the same callback URL in those setups.

Note for Next.js with TypeScript:

Ensure your Next.js application correctly handles the redirect and callback from GitHub. You might need to set up specific routes in your Next.js app to handle the OAuth flow and exchange the code parameter for an access token.

This setup provides a comprehensive way to integrate GitHub into your application for authentication and interaction with GitHub's API on behalf of your users.
@Glime What I'm trying to understand is if I should use only the Github in connected apps to be able to take action on behalf of users. I don't need both of them to be set on my application if not needed. So can I work only with connected apps without the Github social sign-in set up in my app?
Yes, you can work only with GitHub as a connected app without setting up GitHub social sign-in in your application if your primary requirement is to take action on behalf of users rather than using GitHub for user authentication. The connected apps feature in Kinde is designed to let your users access third-party tools and services, like GitHub, through your application. This setup is particularly useful if you need to interact with GitHub's API to perform actions such as accessing repositories, managing issues, or deploying code on behalf of your users.

Setting up GitHub as a connected app involves creating a GitHub app, configuring permissions, and then integrating it with Kinde by providing the necessary credentials (Client ID and Client Secret) and callback URL. This process allows your application to request access tokens from GitHub, which can then be used to make API calls on behalf of your users.

Here's a brief overview of the steps involved in setting up GitHub as a connected app in Kinde, based on the provided context:

  1. Set up a machine to machine application in Kinde for connecting to the Kinde API. This is a prerequisite for adding any connected app.
  2. Create a GitHub app in your GitHub account, specifying the necessary permissions and the callback URL copied from Kinde's GitHub connected app configuration.
  3. Copy the Client ID and Client Secret from your GitHub app and configure the connected app in Kinde by providing these credentials.
This setup is sufficient for your application to interact with GitHub on behalf of your users without requiring them to sign in via GitHub within your application. If your use case does not involve authenticating users through GitHub, you do not need to set up GitHub social sign-in in Kinde.
Remember, the connected apps feature is focused on integrating third-party services into your application for extended functionality, while social sign-in is about leveraging third-party accounts for user authentication. Depending on your application's needs, you can choose to implement one or both of these features.
Add a reply
Sign up and join the conversation on Discord