diff --git a/.github/ISSUE_TEMPLATE/2_bug_provider.yml b/.github/ISSUE_TEMPLATE/2_bug_provider.yml index 4545ebbf3e..c8973ed186 100644 --- a/.github/ISSUE_TEMPLATE/2_bug_provider.yml +++ b/.github/ISSUE_TEMPLATE/2_bug_provider.yml @@ -49,6 +49,7 @@ body: - "EVE Online" - "Facebook" - "FACEIT" + - "Figma" - "Foursquare" - "Freshbooks" - "FusionAuth" diff --git a/docs/pages/data/manifest.json b/docs/pages/data/manifest.json index 50fb339f1c..89508b5389 100644 --- a/docs/pages/data/manifest.json +++ b/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", diff --git a/docs/pages/getting-started/providers/figma.mdx b/docs/pages/getting-started/providers/figma.mdx new file mode 100644 index 0000000000..160e3e3b38 --- /dev/null +++ b/docs/pages/getting-started/providers/figma.mdx @@ -0,0 +1,134 @@ +import { Code } from "@/components/Code" +import { Callout } from "nextra/components" + + + +# 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 + + + + +```bash +https://example.com/api/auth/callback/figma +``` + + + + +```bash +https://example.com/auth/callback/figma +``` + + + + +```bash +https://example.com/auth/callback/figma +``` + + + + +### Environment Variables + + + + +```bash filename=".env.local" +AUTH_FIGMA_ID +AUTH_FIGMA_SECRET +``` + + + + +```bash filename=".env" +AUTH_FIGMA_ID +AUTH_FIGMA_SECRET +``` + + + + +```bash filename=".env" +AUTH_FIGMA_ID +AUTH_FIGMA_SECRET +``` + + + + +```bash filename=".env" +AUTH_FIGMA_ID +AUTH_FIGMA_SECRET +``` + + + + +### Configuration + + + + +```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], +}) +``` + + + + +```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], + }) +) +``` + + + + +```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], +}) +``` + + + + +```ts filename="/src/app.ts" +import { ExpressAuth } from "@auth/express" +import Figma from "@auth/express/providers/figma" +app.use("/auth/*", ExpressAuth({ providers: [Figma] })) +``` + + + + + + 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. + diff --git a/docs/public/img/providers/figma.svg b/docs/public/img/providers/figma.svg new file mode 100644 index 0000000000..bd81186e9b --- /dev/null +++ b/docs/public/img/providers/figma.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/core/src/providers/figma.ts b/packages/core/src/providers/figma.ts new file mode 100644 index 0000000000..29afe9b32b --- /dev/null +++ b/packages/core/src/providers/figma.ts @@ -0,0 +1,105 @@ +/** + *
+ * Built-in Figma integration. + * + * + * + *
+ * + * @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 +): OAuth2Config { + 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, + } +}