Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(provider): add Instagram provider #1447

Merged
merged 1 commit into from
Mar 5, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/providers/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import GitHub from './github'
import GitLab from './gitlab'
import Google from './google'
import IdentityServer4 from './identity-server4'
import Instagram from './instagram'
import LINE from './line'
import LinkedIn from './linkedin'
import MailRu from './mailru'
Expand Down Expand Up @@ -55,6 +56,7 @@ export default {
GitLab,
Google,
IdentityServer4,
Instagram,
LINE,
LinkedIn,
MailRu,
Expand Down
50 changes: 50 additions & 0 deletions src/providers/instagram.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/**
* @param {import("../server").Provider} options
* @example
*
* ```js
* // pages/api/auth/[...nextauth].js
* import Providers from `next-auth/providers`
* ...
* providers: [
* Providers.Instagram({
* clientId: process.env.INSTAGRAM_CLIENT_ID,
* clientSecret: process.env.INSTAGRAM_CLIENT_SECRET
* })
* ]
* ...
*
* // pages/index
* import { signIn } from "next-auth/client"
* ...
* <button onClick={() => signIn("instagram")}>
* Sign in
* </button>
* ...
* ```
* *Resources:*
* - [NextAuth.js Documentation](https://next-auth.js.org/providers/instagram)
* - [Instagram Documentation](https://developers.facebook.com/docs/instagram-basic-display-api/getting-started)
* - [Configuration](https://developers.facebook.com/apps)
*/
export default function Instagram (options) {
return {
id: 'instagram',
name: 'Instagram',
type: 'oauth',
version: '2.0',
scope: 'user_profile',
params: { grant_type: 'authorization_code' },
accessTokenUrl: 'https://api.instagram.com/oauth/access_token',
authorizationUrl: 'https://api.instagram.com/oauth/authorize?response_type=code',
profileUrl: 'https://graph.instagram.com/me?fields=id,username,account_type,name',
async profile (profile) {
return {
id: profile.id,
name: profile.username,
email: null,
image: null
}
}
}
}
42 changes: 42 additions & 0 deletions www/docs/providers/instagram.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
id: instagram
title: Instagram
---

## Documentation

https://developers.facebook.com/docs/instagram-basic-display-api/getting-started

## Configuration

https://developers.facebook.com/apps/

## Example

```jsx
// pages/api/auth/[...nextauth].js
import Providers from `next-auth/providers`
...
providers: [
Providers.Instagram({
clientId: process.env.INSTAGRAM_CLIENT_ID,
clientSecret: process.env.INSTAGRAM_CLIENT_SECRET
})
]
...
// pages/index.jsx
import { signIn } from "next-auth/client"
...
<button onClick={() => signIn("instagram")}>
Sign in
</button>
...
```

:::warning
Email address is not returned by the Instagram API.
:::

:::tip
Instagram display app required callback URL to be configured in your Facebook app and Facebook required you to use **https** even for localhost! In order to do that, you either need to [add an SSL to your localhost](https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/) or use a proxy such as [ngrock](https://ngrok.com/docs).
:::