frontegg / frontegg-nextjs Goto Github PK

Describe the bug
The documentation at https://docs.frontegg.com/docs/nextjs-1 reflects @frontegg/[email protected]

To Reproduce

1. Visit https://docs.frontegg.com/docs/nextjs-1
2. Read the docs

Expected behavior

Documentation page uses the most recent version, or gives option to select it

Screenshots

Additional context
Add any other context about the problem here.

Describe the bug

Large requests fired

Requests for https://assets.frontegg.com/admin-box/6.65.0/login-box/index.js and https://assets.frontegg.com/admin-box/6.65.0/admin-portal/index.js are fired even though login box and admin portal are not shown on the screen for an authed user. Additionally, we don't even use any admin portal functionality within our application, so this is wasted requests and should be avoided.

Resource does not use HTTPS

A request to http://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap is fired, which is not using HTTPS and is therefore flagged by both Lighthouse and webhint. Additionally, why is this request triggered at all when there are no visible resources from Frontegg that need a custom font?

Issues with Cookies coming from Frontegg

Wasn't able to gather more information on this, but I assume its due to missing/wrong secure, httpOnly or sameSite configuration.

Expected behavior
Frontegg respects the user's interest in having a lean and performant application and doesn't weigh it down.

Describe the bug

@frontegg/nextjs depends on @frontegg/admin-portal and @frontegg/redux-store (which is required by @frontegg/react-hooks) libraries, which are both huge in size.

When using @next/bundle-analyzer, these are the findings:

• @frontegg/admin-portal is reported with a size of 3.66 MB
• @frontegg/redux-store is reported with a size of 500 KB

These sizes are unacceptable in modern web development and should be brought down as much as possible. This bloat is bad for users with metered internet connections, slows down builds and can be avoided.

Expected behavior
Bring down the bundle size of frontegg libraries to an acceptable level.

Screenshots

Describe the bug

We recently started using https://socket.dev/ as part of our dependencies maintenance and the tool has detected a handful of issues which are easy to solve:

https://socket.dev/npm/package/@frontegg/nextjs/issues/6.7.18?tab=dependencies

Expected behavior
Ideally no package issues are reported by Socket

Describe the bug

withFronteggApp requires that certain config options be provided through process.env, even when present in contextOptions.

To Reproduce

c.f.

Steps to reproduce the behavior:

1. Set up a new NextJS app using withFronteggApp.
2. Supply a contextOptions object that contains appUrl, baseUrl, and clientId.
3. Receive a runtime exception.

Expected behavior

Vercel's env handling is a mess; furthermore, I find it to be good practice to run my env through a runtime type validator and parse any config problems as far in advance of a deploy as process. As a result I generally avoid process.env. I'd expect the SDK to be configurable in a variety of ways, and to throw an error only if the data isn't present after attempting to parse it from several sources.

Describe the bug

The Next.js Frontegg documentation here advises creating an ./app/layout.tsx file to render <FronteggAppProvider /> like so:

{/* @ts-expect-error Server Component for more details visit: https://github.com/vercel/next.js/issues/42292 */}
<FronteggAppProvider authOptions={authOptions} hostedLoginBox={true}>
  {children}
</FronteggAppProvider>

Having done this, I believe the @ts-expect-error comment is masking an issue with the typings of the component, where it requires envAppUrl, envBaseUrl, and envClientId to be provided as props (though these are inferred from my .env.local file otherwise).

The TS error is as follows:

Type '{ children: ReactNode; authOptions: { keepSessionAlive: boolean; }; hostedLoginBox: true; }' is missing the following properties from type 'Omit<ClientFronteggProviderProps, "contextOptions">': envAppUrl, envBaseUrl, envClientId ts(2739)

I believe this could be two separate bugs:

1. The @ts-expect-error comment from your docs isn't actually required (at least not in the latest version of Next.js for me, where async server components are now supported)
2. The props type for FronteggAppProvider is slightly wrong or the usage documentation needs to be updated (either the env... props are optional, or the docs should cover passing them)

To Reproduce
Steps to reproduce the behaviour:

1. Follow the setup guide up to this point
2. Remove the @ts-expect-error comment preceding the rendering of <FronteggAppProvider />

Expected behaviour
No TS error, or expect error comment

Describe the bug
Running the create-next-app command fails with

Could not locate the repository for "https://github.com/frontegg/frontegg-nextjs/tree/main". Please check that the repository exists and try again.

To Reproduce

1. Open a terminal
2. Run project creator command npx create-next-app --example "https://github.com/frontegg/frontegg-nextjs/tree/main" --example-path "apps/example" my-nextjs-app-name

Expected behavior

A new next project with frontegg is created

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

Describe the bug
When upgrading versions, it is unclear what changed/improved and what could potentially break.

Expected behavior
It would be great to have descriptions of all the changes within a patch/minor/major release in tags/releases or a CHANGELOG.md file, same like in https://github.com/frontegg/frontegg-react/blob/master/CHANGELOG.md (which is outdated though)

Describe the bug
I'm trying to follow the README instructions to add the Frontegg middleware. When I paste that exact code into a middleware.ts and load my app in the Next dev server, I receive the following error:

Error: The edge runtime does not support Node.js 'crypto' module.

To Reproduce

1. Create a middleware.ts
2. Copy and paste the @frontegg/nextjs example
3. Open and load an endpoint in an app.

Expected behavior
I expected the middleware example to execute in the emulated NextJS runtime.

Screenshots

Additional context
@frontegg/nextjs 6.7.3

dependencies:
@frontegg/nextjs 6.7.3
└─┬ iron-session 6.3.1
  └── @peculiar/webcrypto 1.4.1

Describe the bug

Creating a new nextjs project with project creator results in compile error.

> [email protected] build /Users/zell/temp/my-nextjs-app-name
> next build

Failed to compile.

./pages/_app.tsx:8:32
Type error: Argument of type '({ Component, pageProps }: AppProps<{}>) => Element' is not assignable to parameter of type 'AppType'.
  Type '({ Component, pageProps }: AppProps<{}>) => Element' is not assignable to type 'FunctionComponent<AppPropsType<NextRouter, {}>> & { getInitialProps?(context: AppContextType<NextRouter>): AppInitialProps | Promise<...>; }'.
    Type '({ Component, pageProps }: AppProps<{}>) => Element' is not assignable to type 'FunctionComponent<AppPropsType<NextRouter, {}>>'.
      Types of parameters '__0' and 'props' are incompatible.
        Type 'AppPropsType<NextRouter, {}>' is not assignable to type 'AppProps<{}>'.
          Type 'AppPropsType<NextRouter, {}>' is not assignable to type '{ Component: NextComponentType<NextPageContext, any, {}>; router: Router; __N_SSG?: boolean | undefined; __N_SSP?: boolean | undefined; __N_RSC?: boolean | undefined; }'.
            Types of property 'router' are incompatible.
              Type 'NextRouter' is missing the following properties from type 'Router': components, sdc, sdr, sde, and 24 more.

   6 | }
   7 |
>  8 | export default withFronteggApp(CustomApp, {
     |                                ^
   9 |   /**
  10 |    * Optional frontegg options
  11 |    */
info  - Checking validity of types . ELIFECYCLE  Command failed with exit code 1.

To Reproduce

1. Create a new starter app using npx create-next-app --example "https://github.com/frontegg/frontegg-nextjs/tree/main" --example-path "apps/example" my-nextjs-app-name
2. Build the app with npm build

Expected behavior
App builds correctly

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

Describe the bug

I just attempted to upgrade from Typescript 4.7.4 to 4.8.2 and all code seemed to be fine except for usages of e.g. const { user, isAuthenticated } = useAuth()

The hook throws the following TS errors:

Property 'user' does not exist on type '{}'.
Property 'isAuthenticated' does not exist on type '{}'.

When hovering over useAuth implementation, this is what Typescript 4.7.4 shows:

(alias) useAuth<{
    user: any;
    isAuthenticated: any;
}>(stateMapper?: AuthStateMapper<{
    user: any;
    isAuthenticated: any;
}> | undefined): {
    user: any;
    isAuthenticated: any;
}

With Typescript 4.8.2, it looks a bit different:

(alias) useAuth<object>(stateMapper?: AuthStateMapper<object> | undefined): object

The type definitions come from @frontegg/react-hooks/auth/hooks.d.ts

Expected behavior
No TS errors with Typescript 4.8.2

Describe the bug
SDK does not support Next.js basePath https://nextjs.org/docs/api-reference/next.config.js/basepath

To Reproduce

1. Add basePath: 'test' to next.config.js
2. Try to login
3. Redirect goes to wrong url, without basePath

Expected behavior
SDK should respect basePath

Describe the bug

Trying to integrated Next.JS project with hosted login box.
Using code from https://github.com/frontegg/frontegg-nextjs/tree/master/apps.
After Google sign - all good - redirected back to http://localhost:3000/account/social/success?state=fdssdf....
Then 404 error received.
Checked FronteggRouter.tsx - and only found login/logout routes (@frontegg/nextjs not handling this route).

To Reproduce

1. Use https://github.com/frontegg/frontegg-nextjs/tree/master/apps/example or follow Next.js integration docs.
2. Sign in with google.
3. Success. Redirect leads you back to localhost:3000 but nothing happens.

Expected behavior
Data from redirect processed to auth session.