feat(provider): add Frontegg provider #11342
Conversation
vladFrontegg
requested review from
ThangHuuVu,
ubbe-xyz and
ndom91
as code owners
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
|
@vladFrontegg is attempting to deploy a commit to the authjs Team on Vercel. A member of the Team first needs to authorize it. |
|
Watching this one so we can use Frontegg with next-auth. |
|
So did attempt to test this for existing app of my running "next": "14.2.5",
"next-auth": "^4.24.11",
"react": "18.3.1",but ultimately got stuck on a callback redirect complaining the app id is not matching. Confused because everything does seem to match between my env vars and frontegg. Anyways here are some steps I took and notes on possibly next steps. Would be nice to get this working so it can fully work with nextauth.
/**
* src/libs/FrontEggNextAuthProvider.ts
* @module providers/frontegg
*/
import type { OAuthUserConfig, OAuthConfig } from 'next-auth/providers/oauth'
/** The returned user profile from Frontegg when using the profile callback. [Reference](https://docs.frontegg.com/docs/admin-portal-profile). */
// export interface FronteggProfile {
export interface FronteggProfile extends Record<string, any> {
/** 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
}
export default function Frontegg<P extends FronteggProfile>(options: OAuthUserConfig<P>): OAuthConfig<P> {
return {
id: 'frontegg',
name: 'Frontegg',
type: 'oauth',
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,
profile(profile, tokens) {
console.log('profile>>>', profile, tokens)
return {
id: profile.sub,
name: profile.name,
email: profile.email,
image: profile.profilePictureUrl
}
},
client: {
token_endpoint_auth_method: 'client_secret_post'
},
options
}
}inside nextauth provider object // src/libs/auth.ts
// Third-party Imports
import { PrismaAdapter } from '@auth/prisma-adapter'
import { PrismaClient } from '@prisma/client'
import type { NextAuthOptions } from 'next-auth'
import type { Adapter } from 'next-auth/adapters'
import Frontegg from './FrontEggNextAuthProvider'
const prisma = new PrismaClient()
export const authOptions: NextAuthOptions = {
adapter: PrismaAdapter(prisma) as Adapter,
// ** Configure one or more authentication providers
// ** Please refer to https://next-auth.js.org/configuration/options#providers for more `providers` options
providers: [
// ** ...add more providers here
Frontegg({
clientId: process.env.AUTH_FRONTEGG_ID as string,
clientSecret: process.env.AUTH_FRONTEGG_SECRET as string,
issuer: process.env.AUTH_FRONTEGG_ISSUER
})
],
debug: true,
// ** Please refer to https://next-auth.js.org/configuration/options#session for more `session` options
session: {
/*
* Choose how you want to save the user session.
* The default is `jwt`, an encrypted JWT (JWE) stored in the session cookie.
* If you use an `adapter` however, NextAuth default it to `database` instead.
* You can still force a JWT session by explicitly defining `jwt`.
* When using `database`, the session cookie will only contain a `sessionToken` value,
* which is used to look up the session in the database.
* If you use a custom credentials provider, user accounts will not be persisted in a database by NextAuth.js (even if one is configured).
* The option to use JSON Web Tokens for session tokens must be enabled to use a custom credentials provider.
*/
strategy: 'jwt',
// ** Seconds - How long until an idle session expires and is no longer valid
maxAge: 30 * 24 * 60 * 60 // ** 30 days
},
// ** Please refer to https://next-auth.js.org/configuration/options#pages for more `pages` options
pages: {
signIn: '/login'
},
// ** Please refer to https://next-auth.js.org/configuration/options#callbacks for more `callbacks` options
callbacks: {
/*
* While using `jwt` as a strategy, `jwt()` callback will be called before
* the `session()` callback. So we have to add custom parameters in `token`
* via `jwt()` callback to make them accessible in the `session()` callback
*/
async jwt({ token, user }) {
console.log('jwt', token)
if (user) {
/*
* For adding custom parameters to user in session, we first need to add those parameters
* in token which then will be available in the `session()` callback
*/
token.name = user.name
}
return token
},
async session({ session, token }) {
console.log('sessionx', session)
if (session.user) {
// ** Add custom params to user in session which are added in `jwt()` callback via `token` parameter
session.user.name = token.name
}
return session
}
}
}inside login page ...
<Button
color='secondary'
className='self-center text-textPrimary'
startIcon={<img src='/images/logos/google.png' alt='Google' width={22} />}
sx={{ '& .MuiButton-startIcon': { marginInlineEnd: 3 } }}
onClick={() => signIn('frontegg')}
>
Sign in with FrontEgg
</Button>
...Like I said, it actually works well up to the very end where I expected to log me in since frontegg login box works as expected. Did test it in a sample nextjs app running below directly fine but I wanted to hook it up via nextauth for good reason. Anyways, if it finds a frontegg dev that would be great or anyone thats successfully got it working in v4. Thanks |
|
Thanks for providing detailed info, @ar-to, I'll see if I can reproduce or ask someone from Eng to test. |
|
Heads up I managed to get it working after some back and forth in the frontegg slack thread here. I'll try to make some time to create a sample repo for reference in case it helps. In the mean time here are the notes I got from that, which I also shared in the slack thread.
|
|
One final update I think. Went ahead and added a demo app that implements the above custom provider successfully. This will get replaced once this PR is merged but it would definitely be helpful for us to have a demo showing the most updated version working to help devs out. An article would be bonus too. I'll try make time for an article but just heads up to the frontegg team as that would speed up adoption and are closer to this! Hope this all helps. https://github.com/ar-to/frontegg-nextjs-samples/tree/master/demos/nextjs15-nextauth4 |
|
Thanks for following up and the further detail, @ar-to! An article of some kind is definitely on the list to do. There was a recent UI update, so some of the instructions in there need to be updated as well on where to find various values.
You may want to look under Authnetication > Social logins if you're connecting to something like Google/Apple/GitHub or under Authentication > SSO in the admin console for setting up a more general OIDC (OAuth) connection. |
@akdombrowski actually i think what I'm looking to do is via SAML. I added the resources I found for this inside a new demo need @ https://github.com/ar-to/frontegg-nextjs-samples/tree/master/demos/nextjs-saml for future use hopefully. I posted an thorough feature request on slack so please take a look and let me know what you think. Also, I did manage to test this SSO setup in production with a domain rather than just localhost:3000 and its working. Something interesting I found is that if I have that live site up in a new Chrome Incognito browser and then run a localhost site, it will allow me to log in to both. I just have to press login and it works. I like the UX but not positive that expected. |
|
added a demo for implementing this custom provider into a nextjs15+authjs(nextauth5 beta) app @ https://github.com/ar-to/frontegg-nextjs-samples/tree/master/demos/nextjs15-authjs. Works as expected. |
Co-authored-by: Nico Domino <[email protected]>
☕️ Reasoning
Add Frontegg auth provider
🧢 Checklist
🎫 Affected issues
📌 Resources