frontegg / frontegg-nextjs Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
Describe the bug
The documentation at https://docs.frontegg.com/docs/nextjs-1 reflects @frontegg/[email protected]
To Reproduce
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 KBThese 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:
withFronteggApp
.contextOptions
object that contains appUrl
, baseUrl
, and clientId
.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:
@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)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:
@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
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
middleware.ts
Expected behavior
I expected the middleware example to execute in the emulated NextJS runtime.
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
npx create-next-app --example "https://github.com/frontegg/frontegg-nextjs/tree/main" --example-path "apps/example" my-nextjs-app-name
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
basePath: 'test'
to next.config.js
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
Expected behavior
Data from redirect processed to auth session.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.