GitHub Provider
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
- Creating an OAuth app (opens in a new tab)
- Authorizing OAuth apps (opens in a new tab)
- Scopes for OAuth apps (opens in a new tab)
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.
parameter | type | required | description |
---|---|---|---|
scope | string | true | A 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). |
login | string | false | Suggests a specific account to use for signing in and authorizing the app. |
allow_signup | string | false | Whether 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. |
prompt | string | false | Forces 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. |