Skip to content

Commit

Permalink
feat(provider): add Instagram provider (#1447)
Browse files Browse the repository at this point in the history
Co-authored-by: @PolMrt pol@hey.com
  • Loading branch information
balazsorban44 authored Mar 5, 2021
1 parent 0e20b60 commit ed5cc4a
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 0 deletions.
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).
:::

1 comment on commit ed5cc4a

@vercel
Copy link

@vercel vercel bot commented on ed5cc4a Mar 5, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.