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(provider): add Frontegg provider #11342

Merged
merged 8 commits into from
Dec 22, 2024
Merged
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 @@ -57,6 +57,7 @@ body:
- "Identity Server 4"
- "Instagram"
- "Kakao"
- "Frontegg"
- "Keycloak"
- "Kinde"
- "Line"
Expand Down
4 changes: 4 additions & 0 deletions apps/dev/nextjs/.env.local.example
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@ AUTH_TWITTER_SECRET=
AUTH_WIKIMEDIA_ID=
AUTH_WIKIMEDIA_SECRET=

AUTH_FRONTEGG_ID=
AUTH_FRONTEGG_SECRET=
AUTH_FRONTEGG_ISSUER=

# Yandex OAuth. new app -> https://oauth.yandex.com/client/new/id
AUTH_YANDEX_ID=
AUTH_YANDEX_SECRET=
Expand Down
90 changes: 90 additions & 0 deletions docs/pages/getting-started/providers/frontegg.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import { Callout } from "nextra/components"
import { Code } from "@/components/Code"

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

# Frontegg Provider

## Resources

- [Frontegg documentation](https://docs.frontegg.com/docs/how-to-use-our-docs)

## Setup

### Callback URL

<Code>
<Code.Next>

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

</Code.Next>
<Code.Svelte>

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

</Code.Svelte>
</Code>

### Environment Variables

```
AUTH_FRONTEGG_ID
AUTH_FRONTEGG_SECRET
AUTH_FRONTEGG_ISSUER
```

### Configuration

Follow these steps:

Log into the [Frontegg portal](https://portal.frontegg.com)

Get the following from the Frontegg's portal:

AUTH_FRONTEGG_ID="<Client ID>" # Environments > Your environment > Env settings
AUTH_FRONTEGG_SECRET="<API KEY>" # Environments > Your environment > Env settings
AUTH_FRONTEGG_ISSUER="<https://[YOUR_SUBDOMAIN].frontegg.com>" # Environments > Your environment > Env settings > Domains > Domain name

Add the required environment variables from above to your `.env.local` file.

<Code>
<Code.Next>

```ts filename="/auth.ts"
import NextAuth from "next-auth"
import Frontegg from "next-auth/providers/frontegg"

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

</Code.Next>
<Code.Svelte>

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

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

</Code.Svelte>
<Code.Express>

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

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

</Code.Express>
</Code>
5 changes: 5 additions & 0 deletions docs/public/img/providers/frontegg.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
111 changes: 111 additions & 0 deletions packages/core/src/providers/frontegg.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
/**
* <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
* <span style={{fontSize: "1.35rem" }}>
* Built-in sign in with <b>Frontegg</b> integration.
* </span>
* <a href="https://frontegg.com" style={{backgroundColor: "black", padding: "12px", borderRadius: "100%" }}>
* <img style={{display: "block"}} src="https://authjs.dev/img/providers/frontegg.svg" width="24"/>
* </a>
* </div>
*
* @module providers/frontegg
*/

import type { OIDCConfig, OIDCUserConfig } from "./index.js"

/** The returned user profile from Frontegg when using the profile callback. [Reference](https://docs.frontegg.com/docs/admin-portal-profile). */
export interface FronteggProfile {
/** The user's unique Frontegg ID */
sub: string
/** The user's name */
name: string
/** The user's email */
email: string
/** A boolean indicating if the user's email is verified */
email_verified: boolean
/** The user's picture */
profilePictureUrl: string
/** The user's roles */
roles: string[]
/** The user's custom attributes */
[claim: string]: unknown
}

/**
*
* ### Setup
*
* #### Callback URL
* ```
* https://example.com/api/auth/callback/frontegg
* ```
*
* #### Configuration
* ```ts
* import { Auth } from "@auth/core"
* import Frontegg from "@auth/core/providers/frontegg"
*
* const request = new Request(origin)
* const response = await Auth(request, {
* providers: [
* Frontegg({
* clientId: AUTH_FRONTEGG_ID,
* clientSecret: AUTH_FRONTEGG_SECRET,
* issuer: AUTH_FRONTEGG_ISSUER
* }),
* ],
* })
* ```
*
* ### Configuring Frontegg
*
* Follow these steps:
*
* Log into the [Frontegg portal](https://portal.frontegg.com)
*
* Authentication > Login method > Hosted login > Add your callback url here <{{APP_URL}}/api/auth/callback/frontegg>
*
* Then, create a `.env.local` file in the project root add the following entries:
*
* Get the following from the Frontegg's portal:
* ```
* AUTH_FRONTEGG_ID="<Client ID>" # Environments > Your environment > Env settings
* AUTH_FRONTEGG_SECRET="<API KEY>" # Environments > Your environment > Env settings
* AUTH_FRONTEGG_ISSUER="<https://[YOUR_SUBDOMAIN].frontegg.com>" # Environments > Your environment > Env settings > Domains > Domain name
* ```
*
* ### Resources
*
* - [Frontegg Docs](https://docs.frontegg.com/docs/how-to-use-our-docs)
*
* ### Notes
*
* The Frontegg provider comes with a [default configuration](https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/frontegg.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
* By default, Auth.js assumes that the Frontegg provider is based on the [OIDC](https://openid.net/specs/openid-connect-core-1_0.html) spec
* :::
*
* ## 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 Frontegg(
options: OIDCUserConfig<FronteggProfile>
): OIDCConfig<FronteggProfile> {
return {
id: "frontegg",
name: "Frontegg",
type: "oidc",
authorization: `${options.issuer}/oauth/authorize`,
token: `${options.issuer}/oauth/token`,
userinfo: `${options.issuer}/identity/resources/users/v2/me`,
wellKnown: `${options.issuer}/oauth/.well-known/openid-configuration`,
issuer: options.issuer,
options,
}
}
Loading