@frontegg/nextjs 6.7.9-alpha.3787538027 → 6.7.9

package/CHANGELOG.md

@@ -1,13 +1,12 @@
 # Change Log
 
-## [6.7.9](https://github.com/frontegg/frontegg-nextjs/compare/v6.7.8...v6.7.9) (2022-12-27)
+## [6.7.9](https://github.com/frontegg/frontegg-nextjs/compare/v6.7.8...v6.7.9) (2022-12-20)
 
+- Added support for next 13 - app directory and server components
+- Added support for tree shaking
+- Added support for getSession on edge run time
+- Update iron-session to decrease bundle size 
 
-### NextJS Wrapper 6.7.9:
-- FR-10132 - update withFronteggApp type
-- FR-10166 - update code owners
-- FR-10132 - split cookie and type fixes
-- FR-10106-FR-10103- Make package output both cjs and esm and support useAuthUser for SSR
 
 ## [6.7.8](https://github.com/frontegg/frontegg-nextjs/compare/v6.7.7...v6.7.8) (2022-12-20)
 

package/README.md

@@ -231,7 +231,7 @@ export const getServerSideProps: GetServerSideProps = withSSRSession(
 ## Next.js 13
 ### wrapping your application
 ```ts
-// app/layout.tsx
+// ./app/layout.tsx
 import { FronteggAppProvider } from '@frontegg/nextjs/server';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -248,37 +248,71 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 ### routing
 ```ts
-// app/[...frontegg-router]/page.tsx
+// ./app/[...frontegg-router]/page.tsx
 export { FronteggAppRouter as default } from '@frontegg/nextjs/client';
 ```
 
 ### server component
 ```ts
-// app/ServerComponent.tsx
-import { getUserSession } from '@frontegg/nextjs/server';
+// ./app/ServerComponent.tsx
+import { getUserSession } from "@frontegg/nextjs/server";
 
 export const ServerComponent = async () => {
-  const userSession = await getUserSession();
-  return (
+  const user = await getUserSession();
+
+  return user ? (
     <div>
-      user session server side: {JSON.stringify(userSession)}
+      {user.profilePictureUrl && <img src={user.profilePictureUrl} />}
+      <span>Logged in as: {user?.name}</span>
     </div>
-  );
+  ) : null;
 };
+
 ```
 
 ### client component
 ```ts
-// app/ClientComponent.tsx
-'use client';
-import { useAuthUserOrNull } from '@frontegg/nextjs';
+// ./app/ClientComponent.tsx
+"use client";
+import { useAuth, useLoginWithRedirect } from "@frontegg/nextjs";
+
+export const ClientComponent = ({ baseUrl }: { baseUrl: string }) => {
+  const { isAuthenticated } = useAuth();
+  const loginWithRedirect = useLoginWithRedirect();
 
-export const ClientComponent = () => {
-  const user = useAuthUserOrNull();
-  return <div>user session client side: {JSON.stringify(user)}</div>;
+  const logout = () => {
+    window.location.href = `${baseUrl}/account/logout`;
+  };
+
+  return (
+    <button onClick={isAuthenticated ? logout : () => loginWithRedirect()}>
+      {isAuthenticated ? "Log out" : "Click me to login"}
+    </button>
+  );
 };
 ```
 
+### Page
+```ts
+// ./app/page.tsx
+import { ClientComponent } from "./client";
+import { ServerComponent } from "./server";
+
+export default function MainPage() {
+  const baseUrl = process.env["FRONTEGG_APP_URL"];
+  return (
+    <div>
+      <h3>Next JS application with frontegg</h3>
+      {/* @ts-ignore ignore server components error with typescript*/}
+      <ServerComponent />
+      <ClientComponent baseUrl={baseUrl} />
+    </div>
+  );
+}
+```
+
+also keep fronteggMiddleware inside ./pages/api/frontegg/[...frontegg-middleware].ts as shown before
+
 ## Next.js middlewares usage
 
 To prevent access unauthenticated user to all routes, use [Next.js middlewares](https://nextjs.org/docs/advanced-features/middleware).
@@ -293,9 +327,7 @@ import { getSession } from '@frontegg/nextjs/edge';
 
 export const middleware = async (request: NextRequest) => {
   const session = await getSession(request);
-  const isAuthRoute = [...your auth routes]
-
-  console.log("middleware session", session);
+  const isAuthRoute = request.url.endsWith(YOUR_AUTH_ROUTES)
 
   if(!session && isAuthRoute){
     // redirect unauthenticated user to /account/login page

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontegg/nextjs",
   "libName": "FronteggNextJs",
-  "version": "6.7.9-alpha.3787538027",
+  "version": "6.7.9",
   "author": "Frontegg LTD",
   "license": "MIT",
   "types": "dist/index.d.ts",

package/withFronteggApp.d.ts

@@ -1,11 +1,11 @@
 import { FronteggAppOptions } from '@frontegg/types';
-import type { AppInitialProps, AppProps } from 'next/app';
+import type { AppInitialProps } from 'next/app';
 import type { AppContextType, AppPropsType, NextComponentType } from 'next/dist/shared/lib/utils';
 import { FronteggNextJSSession } from './common';
 type FronteggCustomApp = NextComponentType<AppContextType & {
     session: FronteggNextJSSession | null;
 }, AppInitialProps, AppPropsType>;
-export declare const withFronteggApp: (app: ((props: AppProps | unknown) => JSX.Element) & {
+export declare const withFronteggApp: (app: ((props: AppPropsType<any>) => JSX.Element) & {
     getInitialProps?: FronteggCustomApp['getInitialProps'];
 }, options?: Omit<FronteggAppOptions, 'contextOptions'> & {
     contextOptions?: FronteggAppOptions['contextOptions'];