feat(provider): add Instagram provider (nextauthjs#1447)

Co-authored-by: @PolMrt [email protected]

Author: mnphpexpert

src/providers/index.js

@@ -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'
@@ -55,6 +56,7 @@ export default {
   GitLab,
   Google,
   IdentityServer4,
+  Instagram,
   LINE,
   LinkedIn,
   MailRu,

src/providers/instagram.js

@@ -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
+      }
+    }
+  }
+}

www/docs/providers/instagram.md

@@ -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).
+:::