v7.0.4

v7.0.4

• Lock reduxjs/toolkit version to be compatible in Vite types plugin
• Fixed password input placeholder text in the login box
• Fixed social login buttons order
• Fix Vite js-sha256 warning
• Fixed company name error in split mode sign up
• Fixed phone number dropdown theming
• Added aria labels to buttons

v7.0.3

v7.0.3

• Added support for SCIM groups
• Updated texts across login box - grammar and terminology
• Added impersonation indicator to show impersonator that they're in an impersonation session
• Added passkeys feature

NextJS Wrapper 7.0.3:

• FR-11268 - Fix nextjs edge session check
• FR-11268 - build .env.test file in runtime with random values

v7.0.2

Release Notes for @frontegg/nextjs Library Version 7.0.2

🎉 We are excited to announce the release of version 7.0.2 of the @frontegg/nextjs library! This release includes a number of bug fixes and improvements.

Bug Fixes

• Fixed table color
• Fixed SSO Groups
• Fixed feature flags store name
• Error handling on profile image upload

Improvements

• Added passkeys mocks for testing
• MFA authenticator app change input type
• Added unit testing with jest
• Extended users table with groups column
• Built .env.test file in runtime with random values
• Added support for ForceMFA after SAML login

For more information, please visit our Releases page and our Issues page.

v7.0.1

v7.0.1

• FR-11247 - fix version branch 6.82

• FR-11065 - add passkeys mock ff

• FR-11189 - mfa authenticator app change input type

• FR-10821 - fix table color

• FR-11204 - add unit testing with jest

• FR-11139 - fix groups

• FR-11039 - fix groups dummy

• FR-11039 - ff groups

• FR-10530 - fix ff store name

• FR-11067 - error handling on profile image upload

• FR-11039 - extend users table with groups column

v7.0.0

Summary

In this release, we've introduced several breaking changes that might impact your existing code.
Please review the changes outlined below and update your code accordingly to ensure compatibility with the new version.

Changes

• Folder Hierarchy: Separate files per runtime environment ( pages / edge / appDirectory)
  • @frontegg/nextjs/pages for pages architecture.
  • @frontegg/nextjs/app for appDirectory architecture.
  • @frontegg/nextjs/edge for edge runtime.
  • @frontegg/nextjs/middleware for api middleware.
• Tree-Shaking: Build package using babel.js with fully tree-shakable dist folder
• Logger: Add ability for print info logs for debugging.
• Improved Error handling: Improve api middleware error handing.
• Node.js 18 Support: Support the new Undici network handler.
• Next.js 13.2 Support: Next.js route handlers.
• Tests: Add e2e tests for the FronteggApiMiddleware.

Migrate from v6 to v7

• Migrate api middleware (tree-shakable, externalResolver, responseLimit).
• Edge middleware Migration (tree-shakable, stability)
• Pages architecture (tree-shakable, share logic code between architectures)
• AppDir architecture (tree-shakable, stability, support 13.2 routing)

Frontegg API middleware migration

If you are using FronteggProviderNoSSR you can skip this migration:

1. Rename imports to @frontegg/nextjs/middleware
2. export Next.JS config to mark as externalResolver and disable response limit.

API Middleware (before):

export { fronteggMiddleware as default } from '@frontegg/nextjs';

API Middleware (after):

import { FronteggApiMiddleware } from '@frontegg/nextjs/middleware';

export default FronteggApiMiddleware;
export const config = {
  api: {
    externalResolver: true,
    // https://nextjs.org/docs/messages/api-routes-response-size-limit
    responseLimit: false,
  },
};

Edge middleware migration

If you are using nextjs edge middleware, (Ex: middleware.ts):

1. Rename the imports to @frontegg/nextjs/edge.

2. Rename getSession to getSessionOnEdge.

3. Use redirectToLogin method instead of building login url.

   API Middleware (before):

   import { NextResponse } from 'next/server';
   import type { NextRequest } from 'next/server';
   import { getSession, shouldByPassMiddleware } from '@frontegg/nextjs/edge';
   
   export const middleware = async (request: NextRequest) => {
     const pathname = request.nextUrl.pathname;
   
     if (shouldByPassMiddleware(pathname /*, options: optional bypass configuration */)) {
       return NextResponse.next();
     }
   
     const session = await getSession(request);
     if (!session) {
       //  redirect unauthenticated user to /account/login page
       const loginUrl = `/account/login?redirectUrl=${encodeURIComponent(pathname)}`;
       return NextResponse.redirect(new URL(loginUrl, process.env['FRONTEGG_APP_URL']));
     }
   return NextResponse.next();
   };
   
   export const config = {
     matcher: '/(.*)',
   };

   API Middleware (after):

   import { NextResponse } from 'next/server';
   import type { NextRequest } from 'next/server';
   import { getSessionOnEdge, shouldByPassMiddleware, redirectToLogin } from '@frontegg/nextjs/edge';
   
   export const middleware = async (request: NextRequest) => {
     const pathname = request.nextUrl.pathname;
   
     if (shouldByPassMiddleware(pathname)) {
       return NextResponse.next();
     }
   
     const session = await getSessionOnEdge(request);
     if (!session) {
       return redirectToLogin(pathname);
     }
     return NextResponse.next();
   };
   
   export const config = {
     matcher: '/(.*)',
   };

Pages architecture migration

1. Rename imports from @frontegg/nextjs to @frontegg/nextjs/pages.

   Example (before):

   import { withFronteggApp } from '@frontegg/nextjs';

   Example (after):

   import { withFronteggApp } from '@frontegg/nextjs/pages';

2. Import and then export FronteggRouter in your pages/[...frontegg-router].tsx file:

   FronteggRouter (before):

   export {
     FronteggRouter as default,
     FronteggRouterProps as getServerSideProps,
   } from '@frontegg/nextjs';

   FronteggRouter (after):

   import { FronteggRouter, FronteggRouterProps } from '@frontegg/nextjs/pages';
   
   export const getServerSideProps = FronteggRouterProps;
   export default FronteggRouter;

3. import getServerSideProps helpers from @frontegg/nextjs/pages:

   Example Page (before):

   import { GetServerSideProps } from 'next';
   import { getSession, withSSRSession } from '@frontegg/nextjs';
   
   export default function ExamplePage({ ssrSession }) {
     return  <div> My Example Page </div>;
   }
   
   export const getServerSideProps: GetServerSideProps = async (context) => {
     const session = await getSession(context.req);
     if (session) {
       // logged user
       return { props: { } };
     }
     // unauthorized user
     return { props: { } };
   };

   Example Page (before):

   import { GetServerSideProps } from 'next';
   import { getSession, withSSRSession } from '@frontegg/nextjs/pages';
   
   export default function ExamplePage({ ssrSession }) {
     return  <div> My Example Page </div>;
   }
   
   export const getServerSideProps: GetServerSideProps = async (context) => {
     const session = await getSession(context.req);
     
     // ...
   };

App Directory architecture migration

1. Rename imports from @frontegg/nextjs/server to @frontegg/nextjs/app.

2. Move FronteggAppProvider to inside RootLayout's <body>:

   RootLayout file (before):

   import { FronteggAppProvider } from '@frontegg/nextjs/server';
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
       const authOptions = {
         // keepSessionAlive: true // Uncomment this in order to maintain the session alive
       }
       return (
         <FronteggAppProvider authOptions={authOptions} hostedLoginBox={true}>
           <html>
             <head></head>
             <body>
               {children}
             </body>
           </html>
         </FronteggAppProvider>
       );
   }

   RootLayout file (after):

   import { FronteggAppProvider } from '@frontegg/nextjs/app';
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
       const authOptions = {
         // keepSessionAlive: true // Uncomment this in order to maintain the session alive
       }
       return (
         <html>
           <head></head>
           <body>
               {/* @ts-expect-error Server Component for more details visit: https://github.com/vercel/next.js/issues/42292 */}
               <FronteggAppProvider authOptions={authOptions} hostedLoginBox={true}>
                   {children}
               </FronteggAppProvider>
           </body>
         </html>
       );
   }

3. Export FronteggAppRouter from @frontegg/nextjs/app, app/[...frontegg-router]/page.tsx file:

   FronteggAppRouter (before):

   export { FronteggAppRouter as default } from '@frontegg/nextjs/client';

   FronteggAppRouter (after):

   import { FronteggAppRouter } from '@frontegg/nextjs/app';
   
   export default FronteggAppRouter;

4. Rename getSession and getUserTokens to getAppUserSession and getAppUserTokens:

   ServerComponent Example (before):

   import { getSession, getUserTokens } from '@frontegg/nextjs/app';
   
   export const ServerSession = async () => {
     const userSession = await getSession();
     const tokens = await getUserTokens();
     return (
       <div>
         <div>user session server side: {JSON.stringify(userSession)}</div>;
         <div>user tokens server side: {JSON.stringify(tokens)}</div>
       </div>
     );
   };

   ServerComponent Example (after):

   import { getAppUserSession, getAppUserTokens } from '@frontegg/nextjs/app';
   
   export const ServerSession = async () => {
     const userSession = await getAppUserSession();
     const tokens = await getAppUserTokens();
     return (
       <div>
         <div>user session server side: {JSON.stringify(userSession)}</div>;
         <div>user tokens server side: {JSON.stringify(tokens)}</div>
       </div>
     );
   };

Further Information

If you encounter any issues or have questions, please report them on our Issues page.

v6.7.20

v6.7.20

• Fixed use permission regex issue to accept a wild card
• User groups design fixes
• Fixed passkeys loading mode and login flow with MFA
• Update dependencies between passkeys and MFA on the privacy page
• Added support to reset Idle session timeout by post messages from the client iFrame
• Added an option to enforce redirect URLs to the same site only to avoid security issues
• Added support for customized social login providers

v6.7.19

v6.7.19

• Fixed resend OTC with reCaptcha
• Added support to let tenants create and manage user groups in the admin portal under a FF
• Added support to login with passkeys and manage passkeys in the admin portal under a FF
• Fixed invite users issue when the vendor is not forcing roles and permissions
• Support auth strategy and social logins for login per tenants
• Refactored feature flag mechanism to be based on rest-api package
• Fixed validation for postcode in admin portal forms
• Fixed SMS code input to have input type number
• Improved auth screens form UX

v6.7.18

v6.7.18

• Fixed Admin portal SSO provider's options to be correlated with the vendor choice
• Fixed background for table pivot column
• Fixed impersonation by removing unnecessary redirects and adding a refresh call
• Fixed style reorder bug when using @emotion/react and Frontegg Next.JS

v6.7.17

Release Notes for @frontegg/nextjs v6.7.17

🎉 We are excited to announce the release of @frontegg/nextjs v6.7.17!

This release includes the following changes:

Updates

• Updated M2M tokens to reflect the vendor choice

Bug Fixes

• Fixed bug with the authentication

For more information, please visit our Releases page. If you encounter any issues, please report them on our Issues page.

v6.7.16

Release Notes v6.7.16 - 🎉

We are excited to share with you our new version 6.7.16 of our @frontegg/nextjs library!

🆕 Enhancements

• Input component added to library for adding members to a tenant 🤗
• User groups card header component added to library 🤩

🐛 Fixes

• Fixed go-to-sign-up message position in speedy login layout 🏃
• Fix filtering SSO providers according to the vendor selection 🔎
• Improved admin portal and login box performance and bundle size 📈

For more details about this release and our previous releases, please check both our Releases and Issues page.

Enjoy! 🤘