Skip to content

Commit 4e9d2a2

Browse files
Lqm1ThangHuuVu
Lqm1
and
ThangHuuVu
authored
feat(providers): add threads (#11215)
* Feature: Threads Provider * Feature: Logo and ISSUE_TEMPLATE * Feature: MDX in Getting Started Page * formatting & update doc * Update threads.ts --------- Co-authored-by: Thang Vu <[email protected]>
1 parent bc4a251 commit 4e9d2a2

File tree

4 files changed

+220
-0
lines changed

4 files changed

+220
-0
lines changed

‎.github/ISSUE_TEMPLATE/2_bug_provider.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ body:
7777
- "Slack"
7878
- "Spotify"
7979
- "Strava"
80+
- "Threads"
8081
- "Tiktok"
8182
- "Todoist"
8283
- "Trakt"

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { Callout } from "nextra/components"
2+
import { Code } from "@/components/Code"
3+
4+
<img align="right" src="/img/providers/threads.svg" height="64" width="64" />
5+
6+
# Instagram Provider
7+
8+
## Resources
9+
10+
- [Threads OAuth documentation](https://developers.facebook.com/docs/threads)
11+
- [Threads OAuth apps](https://developers.facebook.com/apps/)
12+
13+
## Setup
14+
15+
### Callback URL
16+
17+
<Code>
18+
<Code.Next>
19+
20+
```bash
21+
https://example.com/api/auth/callback/threads
22+
```
23+
24+
</Code.Next>
25+
<Code.Svelte>
26+
27+
```bash
28+
https://example.com/auth/callback/threads
29+
```
30+
31+
</Code.Svelte>
32+
</Code>
33+
34+
### Environment Variables
35+
36+
```
37+
AUTH_THREADS_ID
38+
AUTH_THREADS_SECRET
39+
```
40+
41+
### Configuration
42+
43+
<Code>
44+
<Code.Next>
45+
46+
```ts filename="/auth.ts"
47+
import NextAuth from "next-auth"
48+
import Threads from "next-auth/providers/threads"
49+
50+
export const { handlers, auth, signIn, signOut } = NextAuth({
51+
providers: [Threads],
52+
})
53+
```
54+
55+
</Code.Next>
56+
<Code.Svelte>
57+
58+
```ts filename="/src/auth.ts"
59+
import { SvelteKitAuth } from "@auth/sveltekit"
60+
import Threads from "@auth/sveltekit/providers/threads"
61+
62+
export const { handle, signIn, signOut } = SvelteKitAuth({
63+
providers: [Threads],
64+
})
65+
```
66+
67+
</Code.Svelte>
68+
<Code.Express>
69+
70+
```ts filename="/src/app.ts"
71+
import { ExpressAuth } from "@auth/express"
72+
import Threads from "@auth/express/providers/threads"
73+
74+
app.use("/auth/*", ExpressAuth({ providers: [Threads] }))
75+
```
76+
77+
</Code.Express>
78+
</Code>
79+
80+
### Notes
81+
82+
- Email address is not returned by the Threads API.
83+
- Threads requires a callback URL to be configured in your Facebook app and Facebook requires 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 [ngrok](https://ngrok.com/docs).

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

Lines changed: 1 addition & 0 deletions
Loading

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

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
/**
2+
* <div style={{backgroundColor: "#000", display: "flex", justifyContent: "space-between", color: "#fff", padding: 16}}>
3+
* <span>Built-in <b>Threads</b> integration.</span>
4+
* <a href="https://www.threads.net/">
5+
* <img style={{display: "block"}} src="https://authjs.dev/img/providers/threads.svg" height="48" />
6+
* </a>
7+
* </div>
8+
*
9+
* @module providers/threads
10+
*/
11+
import type { OAuthConfig, OAuthUserConfig } from "./index.js"
12+
13+
/**
14+
* [User](https://developers.facebook.com/docs/threads/reference/user)
15+
*/
16+
export interface ThreadsProfile {
17+
data: {
18+
/**
19+
* Unique identifier of this user. This is returned as a string in order to avoid complications with languages and tools
20+
* that cannot handle large integers.
21+
*/
22+
id: string
23+
/**
24+
* The Threads handle (username) of this user.
25+
*
26+
* To return this field, add `fields=username` in the authorization request's query parameter.
27+
*/
28+
username?: string
29+
/**
30+
* The URL to the profile image for this user, as shown on the user's profile.
31+
*
32+
* To return this field, add `fields=threads_profile_picture_url` in the authorization request's query parameter.
33+
*/
34+
threads_profile_picture_url?: string
35+
/**
36+
* The text of this user's profile biography (also known as bio), if the user provided one.
37+
*
38+
* To return this field, add `fields=threads_biography` in the authorization request's query parameter.
39+
*/
40+
threads_biography?: string
41+
}
42+
}
43+
44+
/**
45+
* Add Threads login to your page.
46+
*
47+
* ### Setup
48+
*
49+
* #### Callback URL
50+
* ```
51+
* https://example.com/api/auth/callback/threads
52+
* ```
53+
*
54+
* #### Configuration
55+
*```ts
56+
* import { Auth } from "@auth/core"
57+
* import Threads from "@auth/core/providers/threads"
58+
*
59+
* const request = new Request(origin)
60+
* const response = await Auth(request, {
61+
* providers: [
62+
* Threads({
63+
* clientId: THREADS_CLIENT_ID,
64+
* clientSecret: THREADS_CLIENT_SECRET,
65+
* }),
66+
* ],
67+
* })
68+
* ```
69+
*
70+
* ### Resources
71+
*
72+
* - [Threads OAuth documentation](https://developers.facebook.com/docs/threads)
73+
* - [Threads OAuth apps](https://developers.facebook.com/apps/)
74+
*
75+
* ### Notes
76+
*
77+
* :::warning
78+
*
79+
* Email address is not returned by the Threads API.
80+
*
81+
* :::
82+
*
83+
* :::tip
84+
*
85+
* Threads 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 [ngrok](https://ngrok.com/docs).
86+
*
87+
* :::
88+
*
89+
* By default, Auth.js assumes that the Threads provider is
90+
* based on the [OAuth 2](https://www.rfc-editor.org/rfc/rfc6749.html) specification.
91+
*
92+
* :::tip
93+
*
94+
* The Threads provider comes with a [default configuration](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/threads.ts).
95+
* To override the defaults for your use case, check out [customizing a built-in OAuth provider](https://authjs.dev/guides/configuring-oauth-providers).
96+
*
97+
* :::
98+
*
99+
* :::info **Disclaimer**
100+
*
101+
* If you think you found a bug in the default configuration, you can [open an issue](https://authjs.dev/new/provider-issue).
102+
*
103+
* Auth.js strictly adheres to the specification and it cannot take responsibility for any deviation from
104+
* the spec by the provider. You can open an issue, but if the problem is non-compliance with the spec,
105+
* we might not pursue a resolution. You can ask for more help in [Discussions](https://authjs.dev/new/github-discussions).
106+
*
107+
* :::
108+
*/
109+
export default function Threads(
110+
config: OAuthUserConfig<ThreadsProfile>
111+
): OAuthConfig<ThreadsProfile> {
112+
return {
113+
id: "threads",
114+
name: "Threads",
115+
type: "oauth",
116+
checks: ["state"],
117+
authorization: "https://threads.net/oauth/authorize?scope=threads_basic",
118+
token: "https://graph.threads.net/oauth/access_token",
119+
userinfo:
120+
"https://graph.threads.net/v1.0/me?fields=id,username,threads_profile_picture_url",
121+
client: {
122+
token_endpoint_auth_method: "client_secret_post",
123+
},
124+
profile({ data }) {
125+
return {
126+
id: data.id,
127+
name: data.username || null,
128+
email: null,
129+
image: data.threads_profile_picture_url || null,
130+
}
131+
},
132+
style: { bg: "#000", text: "#fff" },
133+
options: config,
134+
}
135+
}

0 commit comments

Comments
 (0)