Skip to content

Commit 14dfaf3

Browse files
halvaradopfalcowinkler
halvaradop
and
falcowinkler
authored
feat(provider): add Figma provider (#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>
1 parent dcaaf1a commit 14dfaf3

File tree

5 files changed

+248
-0
lines changed

5 files changed

+248
-0
lines changed

‎.github/ISSUE_TEMPLATE/2_bug_provider.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ body:
4949
- "EVE Online"
5050
- "Facebook"
5151
- "FACEIT"
52+
- "Figma"
5253
- "Foursquare"
5354
- "Freshbooks"
5455
- "FusionAuth"

‎docs/pages/data/manifest.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
"duende-identityserver-6": "DuendeIdentityServer6",
7474
"eveonline": "EVE Online",
7575
"faceit": "FACEIT",
76+
"figma": "Figma",
7677
"foursquare": "Foursquare",
7778
"freshbooks": "Freshbooks",
7879
"fusionauth": "FusionAuth",

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

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import { Code } from "@/components/Code"
2+
import { Callout } from "nextra/components"
3+
4+
<img align="right" src="/img/providers/figma.svg" height="64" width="64" />
5+
6+
# Figma Provider
7+
8+
## Resources
9+
10+
- [Using OAuth 2 on Figma](https://www.figma.com/developers/api#oauth2)
11+
- [User Type](https://www.figma.com/developers/api#users-types)
12+
- [Scopes](https://www.figma.com/developers/api#authentication-scopes)
13+
- [Migrate](https://www.figma.com/developers/api#oauth_migration_guide)
14+
15+
## Setup
16+
17+
### Callback URL
18+
19+
<Code>
20+
<Code.Next>
21+
22+
```bash
23+
https://example.com/api/auth/callback/figma
24+
```
25+
26+
</Code.Next>
27+
<Code.Qwik>
28+
29+
```bash
30+
https://example.com/auth/callback/figma
31+
```
32+
33+
</Code.Qwik>
34+
<Code.Svelte>
35+
36+
```bash
37+
https://example.com/auth/callback/figma
38+
```
39+
40+
</Code.Svelte>
41+
</Code>
42+
43+
### Environment Variables
44+
45+
<Code>
46+
<Code.Next>
47+
48+
```bash filename=".env.local"
49+
AUTH_FIGMA_ID
50+
AUTH_FIGMA_SECRET
51+
```
52+
53+
</Code.Next>
54+
<Code.Qwik>
55+
56+
```bash filename=".env"
57+
AUTH_FIGMA_ID
58+
AUTH_FIGMA_SECRET
59+
```
60+
61+
</Code.Qwik>
62+
<Code.Svelte>
63+
64+
```bash filename=".env"
65+
AUTH_FIGMA_ID
66+
AUTH_FIGMA_SECRET
67+
```
68+
69+
</Code.Svelte>
70+
<Code.Express>
71+
72+
```bash filename=".env"
73+
AUTH_FIGMA_ID
74+
AUTH_FIGMA_SECRET
75+
```
76+
77+
</Code.Express>
78+
</Code>
79+
80+
### Configuration
81+
82+
<Code>
83+
<Code.Next>
84+
85+
```ts filename="@/auth.ts"
86+
import NextAuth from "next-auth"
87+
import Figma from "next-auth/providers/figma"
88+
export const { handlers, auth, signIn, signOut } = NextAuth({
89+
providers: [Figma],
90+
})
91+
```
92+
93+
</Code.Next>
94+
<Code.Qwik>
95+
96+
```ts filename="/src/routes/plugin@auth.ts"
97+
import { QwikAuth$ } from "@auth/qwik"
98+
import Figma from "@auth/qwik/providers/figma"
99+
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
100+
() => ({
101+
providers: [Figma],
102+
})
103+
)
104+
```
105+
106+
</Code.Qwik>
107+
<Code.Svelte>
108+
109+
```ts filename="/src/auth.ts"
110+
import { SvelteKitAuth } from "@auth/sveltekit"
111+
import Figma from "@auth/sveltekit/providers/figma"
112+
export const { handle, signIn, signOut } = SvelteKitAuth({
113+
providers: [Figma],
114+
})
115+
```
116+
117+
</Code.Svelte>
118+
<Code.Express>
119+
120+
```ts filename="/src/app.ts"
121+
import { ExpressAuth } from "@auth/express"
122+
import Figma from "@auth/express/providers/figma"
123+
app.use("/auth/*", ExpressAuth({ providers: [Figma] }))
124+
```
125+
126+
</Code.Express>
127+
</Code>
128+
129+
<Callout type="warning">
130+
The URL must be accessed via the user's browser and not an embedded webview
131+
inside your application. Webview access to the Figma OAuth flow is not
132+
supported and may stop working for some or all users without an API version
133+
update.
134+
</Callout>

‎docs/public/img/providers/figma.svg

Lines changed: 7 additions & 0 deletions
Loading

‎packages/core/src/providers/figma.ts

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/**
2+
* <div class="provider" style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
3+
* <span>Built-in <b>Figma</b> integration.</span>
4+
* <a href="https://figma.com/">
5+
* <img style={{display: "block"}} src="https://authjs.dev/img/providers/figma.svg" height="48" width="48"/>
6+
* </a>
7+
* </div>
8+
*
9+
* @module providers/figma
10+
*/
11+
import { OAuth2Config, OAuthUserConfig } from "./index.js"
12+
13+
/**
14+
* @see https://www.figma.com/developers/api#users-types
15+
*/
16+
interface FigmaProfile {
17+
id: string
18+
email: string
19+
handle: string
20+
img_url: string
21+
}
22+
23+
/**
24+
* ### Setup
25+
*
26+
* #### Callback URL
27+
*
28+
* ```ts
29+
* https://example.com/api/auth/callback/figma
30+
* ```
31+
*
32+
* #### Configuration
33+
*
34+
* ```ts
35+
* import { Auth } from "@auth/core"
36+
* import Figma from "@auth/core/providers/figma"
37+
*
38+
* const request = new Request(origin)
39+
* const response = await Auth(request, {
40+
* providers: [
41+
* Figma({
42+
* clientId: process.env.AUTH_FIGMA_ID,
43+
* clientSecret: process.env.AUTH_FIGMA_SECRET
44+
* })
45+
* ],
46+
* })
47+
* ```
48+
*
49+
* ### Resources
50+
*
51+
* - [Using OAuth 2 on Figma](https://www.figma.com/developers/api#oauth2)
52+
* - [Scopes](https://www.figma.com/developers/api#authentication-scopes)
53+
*
54+
* #### Notes
55+
*
56+
* By default, Auth.js assumes that the Figma provider is based on the [OAuth 2](https://www.rfc-editor.org/rfc/rfc6749.html) specification.
57+
*
58+
* :::tip
59+
*
60+
* The Figma provider comes with a [default configuration](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/figma.ts).
61+
* To override the defaults for your use case, check out [customizing a built-in OAuth provider](https://authjs.dev/guides/configuring-oauth-providers).
62+
*
63+
* :::
64+
*
65+
* :::info **Disclaimer**
66+
*
67+
* If you think you found a bug in the default configuration, you can [open an issue](https://authjs.dev/new/provider-issue).
68+
*
69+
* Auth.js strictly adheres to the specification and it cannot take responsibility for any deviation from
70+
* the spec by the provider. You can open an issue, but if the problem is non-compliance with the spec,
71+
* we might not pursue a resolution. You can ask for more help in [Discussions](https://authjs.dev/new/github-discussions).
72+
*
73+
* :::
74+
*/
75+
export default function Figma(
76+
options: OAuthUserConfig<FigmaProfile>
77+
): OAuth2Config<FigmaProfile> {
78+
return {
79+
id: "figma",
80+
name: "Figma",
81+
type: "oauth",
82+
authorization: {
83+
url: "https://www.figma.com/oauth",
84+
params: {
85+
scope: "files:read",
86+
},
87+
},
88+
checks: ["state"],
89+
token: "https://api.figma.com/v1/oauth/token",
90+
userinfo: "https://api.figma.com/v1/me",
91+
profile(profile) {
92+
return {
93+
name: profile.handle,
94+
email: profile.email,
95+
id: profile.id,
96+
image: profile.img_url,
97+
}
98+
},
99+
style: {
100+
text: "#fff",
101+
bg: "#ff7237",
102+
},
103+
options,
104+
}
105+
}

0 commit comments

Comments
 (0)