feat(provider): add Figma provider (nextauthjs#12529)

* feat(provider): add Figma provider

* chore: update environment variables

* fix docs referencing bitbucket

* simplify provider

* simplify state generation

---------

Co-authored-by: Falco Winkler <8613031+falcowinkler@users.noreply.github.com>

.github/ISSUE_TEMPLATE/2_bug_provider.yml

@@ -49,6 +49,7 @@ body:
         - "EVE Online"
         - "Facebook"
         - "FACEIT"
+        - "Figma"
         - "Foursquare"
         - "Freshbooks"
         - "FusionAuth"

docs/pages/data/manifest.json

@@ -73,6 +73,7 @@
     "duende-identityserver-6": "DuendeIdentityServer6",
     "eveonline": "EVE Online",
     "faceit": "FACEIT",
+    "figma": "Figma",
     "foursquare": "Foursquare",
     "freshbooks": "Freshbooks",
     "fusionauth": "FusionAuth",

docs/pages/getting-started/providers/figma.mdx

@@ -0,0 +1,134 @@
+import { Code } from "@/components/Code"
+import { Callout } from "nextra/components"
+
+<img align="right" src="/img/providers/figma.svg" height="64" width="64" />
+
+# Figma Provider
+
+## Resources
+
+- [Using OAuth 2 on Figma](https://www.figma.com/developers/api#oauth2)
+- [User Type](https://www.figma.com/developers/api#users-types)
+- [Scopes](https://www.figma.com/developers/api#authentication-scopes)
+- [Migrate](https://www.figma.com/developers/api#oauth_migration_guide)
+
+## Setup
+
+### Callback URL
+
+<Code>
+  <Code.Next>
+
+```bash
+https://example.com/api/auth/callback/figma
+```
+
+  </Code.Next>
+  <Code.Qwik>
+
+```bash
+https://example.com/auth/callback/figma
+```
+
+  </Code.Qwik>
+  <Code.Svelte>
+
+```bash
+https://example.com/auth/callback/figma
+```
+
+  </Code.Svelte>
+</Code>
+
+### Environment Variables
+
+<Code>
+  <Code.Next>
+
+```bash filename=".env.local"
+AUTH_FIGMA_ID
+AUTH_FIGMA_SECRET
+```
+
+  </Code.Next>
+  <Code.Qwik>
+
+```bash filename=".env"
+AUTH_FIGMA_ID
+AUTH_FIGMA_SECRET
+```
+
+  </Code.Qwik>
+  <Code.Svelte>
+
+```bash filename=".env"
+AUTH_FIGMA_ID
+AUTH_FIGMA_SECRET
+```
+
+  </Code.Svelte>
+  <Code.Express>
+
+```bash filename=".env"
+AUTH_FIGMA_ID
+AUTH_FIGMA_SECRET
+```
+
+  </Code.Express>
+</Code>
+
+### Configuration
+
+<Code>
+  <Code.Next>
+
+```ts filename="@/auth.ts"
+import NextAuth from "next-auth"
+import Figma from "next-auth/providers/figma"
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  providers: [Figma],
+})
+```
+
+  </Code.Next>
+  <Code.Qwik>
+
+```ts filename="/src/routes/plugin@auth.ts"
+import { QwikAuth$ } from "@auth/qwik"
+import Figma from "@auth/qwik/providers/figma"
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
+  () => ({
+    providers: [Figma],
+  })
+)
+```
+
+  </Code.Qwik>
+  <Code.Svelte>
+
+```ts filename="/src/auth.ts"
+import { SvelteKitAuth } from "@auth/sveltekit"
+import Figma from "@auth/sveltekit/providers/figma"
+export const { handle, signIn, signOut } = SvelteKitAuth({
+  providers: [Figma],
+})
+```
+
+  </Code.Svelte>
+  <Code.Express>
+
+```ts filename="/src/app.ts"
+import { ExpressAuth } from "@auth/express"
+import Figma from "@auth/express/providers/figma"
+app.use("/auth/*", ExpressAuth({ providers: [Figma] }))
+```
+
+  </Code.Express>
+</Code>
+
+<Callout type="warning">
+  The URL must be accessed via the user's browser and not an embedded webview
+  inside your application. Webview access to the Figma OAuth flow is not
+  supported and may stop working for some or all users without an API version
+  update.
+</Callout>

packages/core/src/providers/figma.ts

@@ -0,0 +1,105 @@
+/**
+ * <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
+ * <span>Built-in <b>Figma</b> integration.</span>
+ * <a href="https://figma.com/">
+ *   <img style={{display: "block"}} src="https://authjs.dev/img/providers/figma.svg" height="48" width="48"/>
+ * </a>
+ * </div>
+ *
+ * @module providers/figma
+ */
+import { OAuth2Config, OAuthUserConfig } from "./index.js"
+
+/**
+ * @see https://www.figma.com/developers/api#users-types
+ */
+interface FigmaProfile {
+  id: string
+  email: string
+  handle: string
+  img_url: string
+}
+
+/**
+ * ### Setup
+ *
+ * #### Callback URL
+ *
+ * ```ts
+ * https://example.com/api/auth/callback/figma
+ * ```
+ *
+ * #### Configuration
+ *
+ * ```ts
+ * import { Auth } from "@auth/core"
+ * import Figma from "@auth/core/providers/figma"
+ *
+ * const request = new Request(origin)
+ * const response = await Auth(request, {
+ *   providers: [
+ *     Figma({
+ *       clientId: process.env.AUTH_FIGMA_ID,
+ *       clientSecret: process.env.AUTH_FIGMA_SECRET
+ *     })
+ *   ],
+ * })
+ * ```
+ *
+ * ### Resources
+ *
+ * - [Using OAuth 2 on Figma](https://www.figma.com/developers/api#oauth2)
+ * - [Scopes](https://www.figma.com/developers/api#authentication-scopes)
+ *
+ * #### Notes
+ *
+ * By default, Auth.js assumes that the Figma provider is based on the [OAuth 2](https://www.rfc-editor.org/rfc/rfc6749.html) specification.
+ *
+ * :::tip
+ *
+ * The Figma provider comes with a [default configuration](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/figma.ts).
+ * To override the defaults for your use case, check out [customizing a built-in OAuth provider](https://authjs.dev/guides/configuring-oauth-providers).
+ *
+ * :::
+ *
+ * :::info **Disclaimer**
+ *
+ * If you think you found a bug in the default configuration, you can [open an issue](https://authjs.dev/new/provider-issue).
+ *
+ * Auth.js strictly adheres to the specification and it cannot take responsibility for any deviation from
+ * the spec by the provider. You can open an issue, but if the problem is non-compliance with the spec,
+ * we might not pursue a resolution. You can ask for more help in [Discussions](https://authjs.dev/new/github-discussions).
+ *
+ * :::
+ */
+export default function Figma(
+  options: OAuthUserConfig<FigmaProfile>
+): OAuth2Config<FigmaProfile> {
+  return {
+    id: "figma",
+    name: "Figma",
+    type: "oauth",
+    authorization: {
+      url: "https://www.figma.com/oauth",
+      params: {
+        scope: "files:read",
+      },
+    },
+    checks: ["state"],
+    token: "https://api.figma.com/v1/oauth/token",
+    userinfo: "https://api.figma.com/v1/me",
+    profile(profile) {
+      return {
+        name: profile.handle,
+        email: profile.email,
+        id: profile.id,
+        image: profile.img_url,
+      }
+    },
+    style: {
+      text: "#fff",
+      bg: "#ff7237",
+    },
+    options,
+  }
+}