@frontegg/nextjs 4.0.18-alpha.2289216589 → 5.0.1-alpha.2295828351

package/FronteggConfig.d.ts

@@ -0,0 +1,26 @@
+import { KeyLike } from 'jose';
+import { AuthPageRoutes } from '@frontegg/redux-store';
+export declare type PasswordsMap = {
+    [id: string]: string;
+};
+export declare type Password = string | PasswordsMap;
+export declare function normalizeStringPasswordToMap(password: Password): PasswordsMap;
+declare class FronteggConfig {
+    private readonly _cookieName;
+    private readonly _password;
+    private _jwtPublicKey;
+    private readonly _passwordsAsMap;
+    private readonly _clientId;
+    authRoutes: Partial<AuthPageRoutes>;
+    constructor();
+    get cookieName(): string;
+    get password(): string;
+    get clientId(): string;
+    get baseUrlHost(): string;
+    get appUrl(): string;
+    get cookieDomain(): string;
+    getJwtPublicKey(): Promise<KeyLike | Uint8Array>;
+    get passwordsAsMap(): PasswordsMap;
+}
+declare const _default: FronteggConfig;
+export default _default;

package/FronteggMiddleware.d.ts

@@ -0,0 +1,20 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+/**
+ * If pattern information matching the input url information is found in the `pathRewrite` array,
+ * the url value is partially replaced with the `pathRewrite.replaceStr` value.
+ * @param url
+ * @param pathRewrite
+ */
+export declare const rewritePath: (url: string, pathRewrite: {
+    [key: string]: string;
+} | {
+    patternStr: string;
+    replaceStr: string;
+}[]) => string;
+/**
+ * Next.js HTTP Proxy Middleware
+ * @see https://nextjs.org/docs/api-routes/api-middlewares
+ * @param {NextApiRequest} req
+ * @param {NextApiResponse} res
+ */
+export declare function fronteggMiddleware(req: NextApiRequest, res: NextApiResponse): Promise<any>;

package/FronteggProvider.d.ts

@@ -1,13 +1,18 @@
 import { FC, ReactNode } from 'react';
 import { FronteggAppOptions } from '@frontegg/types';
 import { NextRouter } from 'next/router';
-export declare type FronteggProviderProps = FronteggAppOptions & {
+import { FronteggNextJSSession } from './types';
+export declare type FronteggProviderProps = Omit<FronteggAppOptions, 'contextOptions'> & {
     children?: ReactNode;
+    session?: FronteggNextJSSession;
+    envAppUrl: string;
+    envBaseUrl: string;
+    envClientId: string;
+    contextOptions?: Omit<FronteggAppOptions['contextOptions'], 'baseUrl'>;
 };
-declare type ConnectorProps = FronteggAppOptions & {
+declare type ConnectorProps = FronteggProviderProps & {
     router: NextRouter;
     appName?: string;
-    children?: ReactNode;
 };
 export declare const Connector: FC<ConnectorProps>;
 export declare const FronteggProvider: FC<FronteggProviderProps>;

package/FronteggRouter.d.ts

@@ -0,0 +1,5 @@
+export declare function FronteggRouter(): string;
+export declare function FronteggRouterProps(context: any): {
+    notFound: boolean;
+    props: {};
+};

package/README.md

@@ -1,68 +1,217 @@
-# Frontegg Next.js
-
-![alt text](https://fronteggstuff.blob.core.windows.net/frongegg-logos/logo-transparent.png)
+![alt text](./logo.png)
 
 Frontegg is a web platform where SaaS companies can set up their fully managed, scalable and brand aware - SaaS features
 and integrate them into their SaaS portals in up to 5 lines of code.
 
-### @frontegg/nextjs uses AdminPortal and LoginBox.
+## Table of Contents
+
+- [Installation](#installation)
+  - [Create new NextJS project](#create-new-nextjs-project)
+  - [Add to existing project](#add-to-existing-project)
+- [Getting Started](#getting-started)
+  - [Create Frontegg worksapce](#create-frontegg-worksapce)
+  - [Setup environment](#setup-environment)
+- [Documentation](#documentation)
+  - [API Reference](#api-reference)
+  - [Frontegg Provider Options](#frontegg-provider-options)
+  - [getSession](#getsession)
+  - [withSSRSession](#withssrsession)
+  - for more [visit](https://docs.frontegg.com/docs/self-service-introduction)
 
 ## Installation
 
-Use the package manager [npm](https://www.npmjs.com/) to install frontegg Next.js library.
+### Create new NextJS project
+
+To start a new Create Next App project with TypeScript, you can run:
 
 ```bash
-npm install @frontegg/nextjs
+  npx create-next-app --example https://github.com/frontegg/frontegg-nextjs --example-path apps/example my-nextjs-app-name
 ```
 
-## Configuration
+or
 
-Wrap your application in `_app.js` with `Frontegg Provider`:
+```bash
+  yarn create next-app --example https://github.com/frontegg/frontegg-nextjs --example-path apps/example my-nextjs-app-name
+```
 
-```js
-import { FronteggProvider } from '@frontegg/nextjs'
+> If you've previously installed `create-react-app` globally via `npm install -g create-next-app`, we recommend you uninstall the package using `npm uninstall -g create-next-app` or `yarn global remove create-next-app` to ensure that `npx` always uses the latest version.
+>
+> Global installations of `create-next-app` are no longer supported.
 
-const contextOptions = {
-  baseUrl: 'https://{HOST}.frontegg.com',// Your backend base URL (frontegg will direct the requests to it)
-}
+### Add to existing project
 
-export const App = ({ Component, pageProps }) => {
-  return <FronteggProvider contextOptions={contextOptions}>
-    <Component {...pageProps}/>
-  </FronteggProvider>
-}
+To Add Frontegg to your existing Nextjs project, follow below steps:
+
+1. Use package manager to install Frontegg Next.JS library.
+
+   ```bash
+     npm install --save @frontegg/nextjs
+   ```
+
+   or
+
+   ```bash
+     yarn add --save @frontegg/nextjs
+   ```
+
+2. Wrap the default export with `withFronteggApp` in `./pages/_app.tsx`:
+
+   ```tsx
+   // ./pages/_app.tsx
+
+   import { withFronteggApp } from '@frontegg/nextjs';
+
+   function CustomApp({ Component, pageProps }: AppProps) {
+     return <Component {...pageProps} />;
+   }
+
+   export default withFronteggApp(CustomApp);
+   ```
+
+3. Create files for frontegg middleware under `./pages/api/frontegg/[...frontegg-middleware].ts`:
+
+   ```tsx
+   // ./pages/api/frontegg/[...frontegg-middleware].ts
+
+   export { fronteggMiddleware as default } from '@frontegg/nextjs';
+   ```
+
+4. Create placeholder pages for frontegg router under `./pages/[...frontegg-router].tsx`:
+
+   ```tsx
+   // ./pages/[...frontegg-router].tsx
+
+   export {
+     FronteggRouter as default,
+     FronteggRouterProps as getServerSideProps,
+   } from '@frontegg/nextjs';
+   ```
+
+## Getting Started
 
+### Create Frontegg worksapce
+
+Navigate to [Frontegg Portal Settgins](https://portal.frontegg.com/development/settings), If you don't have application
+follow integration steps after signing up.
+
+Next, configure the "Allowed Origins" in your application under "Domain" tab of the "Settings" page :
+
+- http://localhost:3000 // for development environments
+- https://my-company-domain.com // for production environments
+
+Copy ClientID, Frontegg Domain from "Settings" page, You'll need these values in the next step.
+
+### Setup environment
+
+To setup your Next.js application to communicate with Frontegg, you have to create a new file named `.env.local` under
+your root project directory, this file will be used to store environment variables that will be used, configuration
+options:
+
+```dotenv
+# The AppUrl is to tell Frontegg your application hostname
+FRONTEGG_APP_URL='http://localhost:3000'
+
+# The Frontegg domain is your unique URL to connect to the Frontegg gateway
+FRONTEGG_BASE_URL='https://{YOUR_SUB_DOMAIN}.frontegg.com'
+
+# Your Frontegg application's Client ID
+FRONTEGG_CLIENT_ID='{YOUR_APPLICATION_CLIENT_ID}'
+
+# The statless session encruption password, used to encrypt
+# jwt before sending it to the client side.
+#
+# For quick password generation use the following command:
+#    node -e "console.log(crypto.randomBytes(32).toString('hex'))"
+FRONTEGG_ENCRYPTION_PASSWORD='{SESSION_ENCRYPTION_PASSWORD}'
+
+# The statless session cookie name
+FRONTEGG_COOKIE_NAME='fe_session'
 ```
 
-### Usage
+## Documentation
 
-You can use React Hooks to access Frontegg store.
+### API Reference
 
-```js
-import { useAuthUser } from '@frontegg/nextjs'
+Visit [Frontegg Docs](https://docs.frontegg.com) for the full documentation.
 
-const HomePage = () => {
-  const user = useAuthUser();
+### Frontegg Provider Options
 
-  return <div>
-    Logged In user: {user.email}
-  </div>
+Pass seconds argument to `withFronteggApp` function in `_app.ts` file to customize
+Frontegg library.
+
+```tsx
+// ./pages/_app.tsx
+
+import { withFronteggApp } from '@frontegg/nextjs';
+
+function CustomApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
 }
+
+export default withFronteggApp(CustomApp, {
+  /**
+   * Frontegg options for customizations
+   */
+});
 ```
 
-Openning the Admin Portal is available via the following code snippet.
+### getSession
 
-```js
-import { AdminPortal } from '@frontegg/nextjs'
+For any pages that required AccessToken in Server Side, you can use:
 
-const Toolbar = () => {
+```tsx
+import { GetServerSideProps } from 'next';
+import { getSession } from '@frontegg/nextjs';
 
-  return <nav>
-    {/*... your application tabs ...*/}
+export default function MyPage({ products }) {
+  return (
+    <div>
+      <h1>My Page</h1>
+      {products}
+    </div>
+  );
+}
 
-    <button onClick={() => AdminPortal.show()}>
-      Open Admin Portal
-    </button>
-  </nav>
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const session = await getSession(context.req);
+  if (session) {
+    const { data } = await fetch('{external}/product', {
+      headers: {
+        Authorization: 'bearer ' + session.accessToken,
+      },
+    });
+    return { props: { products: data } };
+  }
+
+  return { props: { products: [] } };
+};
+```
+
+### withSSRSession
+
+withSSRSession HOC can be used to automatic redirect users to login screen if not logged in:
+
+```tsx
+import { GetServerSideProps } from 'next';
+import { withSSRSession } from '@frontegg/nextjs';
+
+export default function MyPage({ products }) {
+  return (
+    <div>
+      <h1>My Page</h1>
+      {products}
+    </div>
+  );
 }
+
+export const getServerSideProps: GetServerSideProps = withSSRSession(
+  async (context, session) => {
+    const { data } = await fetch('{external}/product', {
+      headers: {
+        Authorization: 'bearer ' + session.accessToken,
+      },
+    });
+    return { props: { products: data } };
+  }
+);
 ```

package/helpers.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="node" />
+import { ServerResponse } from 'http';
+import { NextPageContext } from 'next/dist/shared/lib/utils';
+import { FronteggNextJSSession } from './types';
+export declare function refreshToken(ctx: NextPageContext): Promise<FronteggNextJSSession | null>;
+export declare function addToCookies(cookieValue: string, res: ServerResponse): void;
+export declare function removeCookies(cookieName: string, isSecured: boolean, cookieDomain: string, res: ServerResponse): void;
+export declare function createSessionFromAccessToken(output: string): Promise<[string, any] | []>;
+export declare const modifySetCookieIfUnsecure: (setCookieValue: string[] | undefined, isSecured: boolean) => string[] | undefined;