@frontegg/nextjs 6.5.0-alpha.3076979339 → 6.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +4 -245
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -1,248 +1,7 @@
1
- ![alt text](./logo.png)
1
+ # nextjs
2
2
 
3
- Frontegg is a web platform where SaaS companies can set up their fully managed, scalable and brand aware - SaaS features
4
- and integrate them into their SaaS portals in up to 5 lines of code.
3
+ This library was generated with [Nx](https://nx.dev).
5
4
 
6
- ## Table of Contents
5
+ ## Running unit tests
7
6
 
8
- - [Installation](#installation)
9
- - [Create new NextJS project](#create-new-nextjs-project)
10
- - [Add to existing project](#add-to-existing-project)
11
- - [Getting Started](#getting-started)
12
- - [Create Frontegg worksapce](#create-frontegg-worksapce)
13
- - [Setup environment](#setup-environment)
14
- - [Documentation](#documentation)
15
- - [API Reference](#api-reference)
16
- - [Frontegg Provider Options](#frontegg-provider-options)
17
- - [getSession](#getsession)
18
- - [withSSRSession](#withssrsession)
19
- - [Next.js middlewares usage](#nextjs-middlewares-usage)
20
- - for more [visit](https://docs.frontegg.com/docs/self-service-introduction)
21
-
22
- ## Installation
23
-
24
- ### Create new NextJS project
25
-
26
- To start a new Create Next App project with TypeScript, you can run:
27
-
28
- ```bash
29
- npx create-next-app --example "https://github.com/frontegg/frontegg-nextjs" --example-path "apps/example" my-nextjs-app-name
30
- ```
31
-
32
- or
33
-
34
- ```bash
35
- yarn create next-app --example "https://github.com/frontegg/frontegg-nextjs" --example-path "apps/example" my-nextjs-app-name
36
- ```
37
-
38
- > 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.
39
- >
40
- > Global installations of `create-next-app` are no longer supported.
41
-
42
- ### Add to existing project
43
-
44
- To Add Frontegg to your existing Nextjs project, follow below steps:
45
-
46
- 1. Use package manager to install Frontegg Next.JS library.
47
-
48
- ```bash
49
- npm install --save @frontegg/nextjs
50
- ```
51
-
52
- or
53
-
54
- ```bash
55
- yarn add --save @frontegg/nextjs
56
- ```
57
-
58
- 2. Wrap the default export with `withFronteggApp` in `./pages/_app.tsx`:
59
-
60
- ```tsx
61
- // ./pages/_app.tsx
62
-
63
- import { withFronteggApp } from '@frontegg/nextjs';
64
-
65
- function CustomApp({ Component, pageProps }: AppProps) {
66
- return <Component {...pageProps} />;
67
- }
68
-
69
- export default withFronteggApp(CustomApp);
70
- ```
71
-
72
- 3. Create files for frontegg middleware under `./pages/api/frontegg/[...frontegg-middleware].ts`:
73
-
74
- ```tsx
75
- // ./pages/api/frontegg/[...frontegg-middleware].ts
76
-
77
- export { fronteggMiddleware as default } from '@frontegg/nextjs';
78
- ```
79
-
80
- 4. Create placeholder pages for frontegg router under `./pages/[...frontegg-router].tsx`:
81
-
82
- ```tsx
83
- // ./pages/[...frontegg-router].tsx
84
-
85
- export {
86
- FronteggRouter as default,
87
- FronteggRouterProps as getServerSideProps,
88
- } from '@frontegg/nextjs';
89
- ```
90
-
91
- ## Getting Started
92
-
93
- ### Create Frontegg worksapce
94
-
95
- Navigate to [Frontegg Portal Settgins](https://portal.frontegg.com/development/settings), If you don't have application
96
- follow integration steps after signing up.
97
-
98
- Next, configure the "Allowed Origins" in your application under "Domain" tab of the "Settings" page :
99
-
100
- - http://localhost:3000 // for development environments
101
- - https://my-company-domain.com // for production environments
102
-
103
- Copy ClientID, Frontegg Domain from "Settings" page, You'll need these values in the next step.
104
-
105
- ### Setup environment
106
-
107
- To setup your Next.js application to communicate with Frontegg, you have to create a new file named `.env.local` under
108
- your root project directory, this file will be used to store environment variables that will be used, configuration
109
- options:
110
-
111
- ```dotenv
112
- # The AppUrl is to tell Frontegg your application hostname
113
- FRONTEGG_APP_URL='http://localhost:3000'
114
-
115
- # The Frontegg domain is your unique URL to connect to the Frontegg gateway
116
- FRONTEGG_BASE_URL='https://{YOUR_SUB_DOMAIN}.frontegg.com'
117
-
118
- # Your Frontegg application's Client ID
119
- FRONTEGG_CLIENT_ID='{YOUR_APPLICATION_CLIENT_ID}'
120
-
121
- # The statless session encruption password, used to encrypt
122
- # jwt before sending it to the client side.
123
- #
124
- # For quick password generation use the following command:
125
- # node -e "console.log(crypto.randomBytes(32).toString('hex'))"
126
- FRONTEGG_ENCRYPTION_PASSWORD='{SESSION_ENCRYPTION_PASSWORD}'
127
-
128
- # The statless session cookie name
129
- FRONTEGG_COOKIE_NAME='fe_session'
130
- ```
131
-
132
- ## Documentation
133
-
134
- ### API Reference
135
-
136
- Visit [Frontegg Docs](https://docs.frontegg.com) for the full documentation.
137
-
138
- ### Frontegg Provider Options
139
-
140
- Pass seconds argument to `withFronteggApp` function in `_app.ts` file to customize
141
- Frontegg library.
142
-
143
- ```tsx
144
- // ./pages/_app.tsx
145
-
146
- import { withFronteggApp } from '@frontegg/nextjs';
147
-
148
- function CustomApp({ Component, pageProps }: AppProps) {
149
- return <Component {...pageProps} />;
150
- }
151
-
152
- export default withFronteggApp(CustomApp, {
153
- /**
154
- * Frontegg options for customizations
155
- */
156
- });
157
- ```
158
-
159
- ### getSession
160
-
161
- For any pages that required AccessToken in Server Side, you can use:
162
-
163
- ```tsx
164
- import { GetServerSideProps } from 'next';
165
- import { getSession } from '@frontegg/nextjs';
166
-
167
- export default function MyPage({ products }) {
168
- return (
169
- <div>
170
- <h1>My Page</h1>
171
- {products}
172
- </div>
173
- );
174
- }
175
-
176
- export const getServerSideProps: GetServerSideProps = async (context) => {
177
- const session = await getSession(context.req);
178
- if (session) {
179
- const { data } = await fetch('{external}/product', {
180
- headers: {
181
- Authorization: 'bearer ' + session.accessToken,
182
- },
183
- });
184
- return { props: { products: data } };
185
- }
186
-
187
- return { props: { products: [] } };
188
- };
189
- ```
190
-
191
- ### withSSRSession
192
-
193
- withSSRSession HOC can be used to automatic redirect users to login screen if not logged in:
194
-
195
- ```tsx
196
- import { GetServerSideProps } from 'next';
197
- import { withSSRSession } from '@frontegg/nextjs';
198
-
199
- export default function MyPage({ products }) {
200
- return (
201
- <div>
202
- <h1>My Page</h1>
203
- {products}
204
- </div>
205
- );
206
- }
207
-
208
- export const getServerSideProps: GetServerSideProps = withSSRSession(
209
- async (context, session) => {
210
- const { data } = await fetch('{external}/product', {
211
- headers: {
212
- Authorization: 'bearer ' + session.accessToken,
213
- },
214
- });
215
- return { props: { products: data } };
216
- }
217
- );
218
- ```
219
-
220
- ## Next.js middlewares usage
221
-
222
- To prevent access unauthenticated user to all routes, use [Next.js middlewares](https://nextjs.org/docs/advanced-features/middleware).
223
-
224
- **Note: If you were using Middleware prior to 12.2, please see the [upgrade guide](https://nextjs.org/docs/messages/middleware-upgrade-guide).**
225
-
226
- ```ts
227
- // /middleware.ts
228
- import { NextResponse } from "next/server";
229
- import type { NextRequest } from "next/server";
230
- import { getSession } from '@frontegg/nextjs';
231
-
232
- export const middleware = async (request: NextRequest) => {
233
- const session = await getSession(request);
234
-
235
- console.log("middleware session", session);
236
-
237
- if(!session){
238
- // redirect unauthenticated user to /account/login page
239
- return NextResponse.redirect(new URL('/account/login', req.url))
240
- }
241
-
242
- return NextResponse.next();
243
- };
244
-
245
- export const config = {
246
- matcher: "/(.*)",
247
- };
248
- ```
7
+ Run `nx test nextjs` to execute the unit tests via [Jest](https://jestjs.io).
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@frontegg/nextjs",
3
- "version": "6.5.0-alpha.3076979339",
3
+ "version": "6.5.0",
4
4
  "dependencies": {
5
- "@frontegg/js": "6.9.0",
6
- "@frontegg/react-hooks": "6.9.0",
5
+ "@frontegg/js": "6.10.0",
6
+ "@frontegg/react-hooks": "6.10.0",
7
7
  "jose": "^4.8.0",
8
8
  "iron-session": "^6.2.1",
9
9
  "http-proxy": "^1.18.1",
@@ -16,4 +16,4 @@
16
16
  "main": "./index.cjs.js",
17
17
  "module": "./index.esm.js",
18
18
  "typings": "./index.d.ts"
19
- }
19
+ }