Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(providers): Add Cloudinary provider #11922

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/ISSUE_TEMPLATE/2_bug_provider.yml
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ body:
- "Box"
- "Bungie"
- "ClickUp"
- "Cloudinary"
- "Cognito"
- "Concept2"
- "Coinbase"
Expand Down
1 change: 1 addition & 0 deletions docs/pages/data/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
"boxyhq-saml": "BoxyHQ SAML",
"bungie": "Bungie",
"clickup": "ClickUp",
"cloudinary": "Cloudinary",
"cognito": "Cognito",
"coinbase": "Coinbase",
"descope": "Descope",
Expand Down
103 changes: 103 additions & 0 deletions docs/pages/getting-started/providers/cloudinary.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import { Callout } from "nextra/components"
import { Code } from "@/components/Code"

<img align="right" src="/img/providers/cloudinary.svg" height="64" width="64" />

# Cloudinary Provider

## Resources

- [Cloudinary OAuth documentation](https://cloudinary.com/documentation/using_oauth_to_access_cloudinary_apis)

## Setup

### Callback URL

<Code>
<Code.Next>

```bash
https://example.com/api/auth/callback/cloudinary
```

</Code.Next>
<Code.Qwik>

```bash
https://example.com/auth/callback/cloudinary
```

</Code.Qwik>
<Code.Svelte>

```bash
https://example.com/auth/callback/cloudinary
```

</Code.Svelte>
</Code>

### Environment Variables

```
AUTH_CLOUDINARY_ID
AUTH_CLOUDINARY_SECRET
```

### Configuration

<Code>
<Code.Next>

```ts filename="/auth.ts"
import NextAuth from "next-auth"
import Cloudinary from "next-auth/providers/cloudinary"

export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [Cloudinary],
})
```

</Code.Next>
<Code.Qwik>

```ts filename="/src/routes/[email protected]"
import { QwikAuth$ } from "@auth/qwik"
import Cloudinary from "@auth/qwik/providers/cloudinary"

export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
() => ({
providers: [Cloudinary],
})
)
```

</Code.Qwik>
<Code.Svelte>

```ts filename="/src/auth.ts"
import { SvelteKitAuth } from "@auth/sveltekit"
import Cloudinary from "@auth/sveltekit/providers/cloudinary"

export const { handle, signIn, signOut } = SvelteKitAuth({
providers: [Cloudinary],
})
```

</Code.Svelte>
<Code.Express>

```ts filename="/src/app.ts"
import { ExpressAuth } from "@auth/express"
import Cloudinary from "@auth/express/providers/cloudinary"

app.use("/auth/*", ExpressAuth({ providers: [Cloudinary] }))
```

</Code.Express>
</Code>

### Notes

- The Cloudinary `userinfo` endpoint returns only a `sub` which is used for both the `id` and the `email` in the user's profile. If you'd like to get more information about the user – you can use the [Cloudinary Account Provisioning API](https://cloudinary.com/documentation/provisioning_api)
- If the OAuth token is used against the Admin/Upload API, the user must be assigned a Master Admin role within the product environment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

temporary limitation. We are working hard to apply granular permission for all accounts, so every user will be able call APIs (using OAuth token)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the clarification @eitan-revach, I think this should be okay to merge as-is and refine after granular permissions are implemented

3 changes: 3 additions & 0 deletions docs/public/img/providers/cloudinary.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
80 changes: 80 additions & 0 deletions packages/core/src/providers/cloudinary.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/**
* <div style={{backgroundColor: "#fff", display: "flex", justifyContent: "space-between", color: "#3448c5", padding: 16}}>
* <span>Built-in <b>Cloudinary</b> integration.</span>
* <a href="https://cloudinary.com/">
* <img style={{display: "block"}} src="https://authjs.dev/img/providers/cloudinary.svg" width="48" height="48" />
* </a>
* </div>
*
* @module providers/cloudinary
*/
import { OAuthConfig, OAuthUserConfig } from "./index.js"

export interface CloudinaryProfile {
sub: string
}

/**
* Add Cloudinary login to your page.
*
* ### Setup
*
* #### Callback URL
* ```
* https://example.com/api/auth/callback/cloudinary
* ```
*
* #### Configuration
* ```ts
* import { Auth } from "@auth/core"
* import Cloudinary from "@auth/core/providers/cloudinary"
*
* const request = new Request(origin)
* const response = await Auth(request, {
* providers: [
* Cloudinary({
* clientId: CLOUDINARY_CLIENT_ID,
* clientSecret: CLOUDINARY_CLIENT_SECRET,
* }),
* ],
* })
* ```
*
* ### Resources
*
* - [Cloudinary OAuth documentation](https://cloudinary.com/documentation/using_oauth_to_access_cloudinary_apis)
*
* ### Notes
* - If the OAuth token is used against the Admin/Upload API, the user must be assigned a Master Admin role within the product environment
* - If you'd like to get more information about the user – you can use the [Cloudinary Account Provisioning API](https://cloudinary.com/documentation/provisioning_api)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oauth token with provisioning_api? for now, with very limited support.
Might be changed later this year.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know @eitan-revach, happy to update in a follow-up PR if this gets changed

*
* ## Help
*
* 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 Cloudinary<P extends CloudinaryProfile>(
options: OAuthUserConfig<P>
): OAuthConfig<P> {
return {
id: "cloudinary",

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what about scopes ?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any idea what a good default value might be or any docs on that? Maybe I can add something similar to how it's done for the Apple provider: https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/apple.ts#L170C33-L170C121

name: "Cloudinary",
type: "oauth",
clientId: options.clientId,
clientSecret: options.clientSecret,
wellKnown: "https://oauth.cloudinary.com/.well-known/openid-configuration",
client: {
token_endpoint_auth_method: "client_secret_post",
},
profile(profile) {
return {
id: profile.sub,
email: profile.sub,
}
},
style: { bg: "#fff", text: "#3448c5" },
}
}
Loading