Documentation
Providers
GitHub

GitHub Provider

github-logo

If you need a detailed guide on how to setup a provider pleaser refer to the Getting Started and Making your first integration guides.

Resources

Setup

Callback URL

https://your-app.com/api/auth/integration/github

Environment variables

.env.local
AUTH_GITHUB_ID=your-client-id
AUTH_GITHUB_SECRET=your-client-secret

Add the provider to the auth.ts file.

auth.ts
import { NextIntegrate } from 'next-integrate';
 
export const { auth } = NextIntegrate({
  // The URL of the app, e.g. https://example.com, set in the .env file.
  // If you want to modify the redirect URL, to be prefixed with something else,
  // you can do it here like this:
  // base_url: process.env.BASE_URL! + "/some-prefix",
  // This will change the redirect URL to eg. https://example.com/some-prefix/api/auth/integration/google
  base_url: process.env.BASE_URL!,
  providers: [
    {
      provider: 'github',
      client_id: process.env.AUTH_GITHUB_ID!,
      client_secret: process.env.AUTH_GITHUB_SECRET!,
      integrations: [],
    },
  ],
});

Add an integration

auth.ts
import { NextIntegrate } from 'next-integrate';
 
export const { auth } = NextIntegrate({
  // The URL of the app, e.g. https://example.com, set in the .env file.
  // If you want to modify the redirect URL, to be prefixed with something else,
  // you can do it here like this:
  // base_url: process.env.BASE_URL! + "/some-prefix",
  // This will change the redirect URL to eg. https://example.com/some-prefix/api/auth/integration/google
  base_url: process.env.BASE_URL!,
  providers: [
    {
      provider: 'github',
      client_id: process.env.AUTH_GITHUB_ID!,
      client_secret: process.env.AUTH_GITHUB_SECRET!,
      integrations: [
        {
          name: 'some_custom_name',
          options: {
            scope: 'user repo',
          },
          callback: async (data) => {
            // This is where you can save the data to a database, or do something else with it.
          },
        },
      ],
    },
  ],
});

Usage

To use the your new integration, you can use the <Integrate /> component found in the Getting Started Guide.

import Integrate from '@/components/integrate';
 
export default function Home() {
  return (
    <main>
      <Integrate provider="github" name="some_custom_name">
        Get GitHub User Info
      </Integrate>
    </main>
  );
}

Options

You can pass various parameters on the options object to customize the integration. The parameters are specific to the GitHub provider, please refer to the documentation (opens in a new tab), to verify the information if needed.

parametertyperequireddescription
scopestringtrueA list of URL's that determines what the user will be prompted to give access to. You can parse multiple scopes by seperating with a space. You can find the full list of scopes here (opens in a new tab).
loginstringfalseSuggests a specific account to use for signing in and authorizing the app.
allow_signupstringfalseWhether or not unauthenticated users will be offered an option to sign up for GitHub during the OAuth flow. The default is true. Use false when a policy prohibits signups.
promptstringfalseForces the account picker to appear if set to select_account. The account picker will also appear if the application has a non-HTTP redirect URI or if the user has multiple accounts signed in.