@frontegg/nextjs 6.7.4-alpha.3470067913 → 6.7.4

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 (3) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/README.md +253 -4
  3. package/package.json +4 -4
package/CHANGELOG.md ADDED
@@ -0,0 +1,39 @@
1
+ # Change Log
2
+
3
+ ## [6.7.4](https://github.com/frontegg/frontegg-nextjs/compare/v6.7.3...v6.7.4) (2022-11-15)
4
+
5
+ - Fixed redirect to the app after signing up without forced email verification
6
+ - Fixed admin portal dark theme
7
+ - Added the ability to customize fields and tabs in the admin portal
8
+ - Fixed cleaning up error messages on sign up page when re-visiting the page
9
+ - Fixed resizing the login box when the logo is null
10
+ - Fix the ReCaptcha timeout issue
11
+
12
+ ## [6.7.3](https://github.com/frontegg/frontegg-nextjs/compare/v6.7.2...v6.7.3) (2022-11-11)
13
+
14
+ - FR-9186 - support ssr with session and refresh token
15
+ - FR-9614 - Add support for innerThemeProvider for admin portal pages and tabs
16
+
17
+ - FR-9186 - fix pipeline
18
+ ### AdminPortal 6.36.0:
19
+ -
20
+
21
+ ### AdminPortal 6.35.0:
22
+ -
23
+ ### AdminPortal 6.34.0:
24
+ -
25
+
26
+ ### NextJS Wrapper 6.7.3:
27
+ - FR-9544 - remove console logs
28
+ - FR-9544 - Add support for keep session a live
29
+ - FR-9187 - split cookie if exceeds length of 4096
30
+
31
+ ## [6.7.2](https://github.com/frontegg/frontegg-nextjs/compare/v6.7.1...v6.7.2) (2022-10-26)
32
+
33
+ ### AdminPortal 6.34.0:
34
+ -
35
+
36
+ ### NextJS Wrapper 6.7.2:
37
+ - FR-9186 - Fix Changelog
38
+ - FR-9186 - Generate changelog for pre-release / releases based on AdminPortal and LoginBox changes
39
+
package/README.md CHANGED
@@ -1,7 +1,256 @@
1
- # nextjs
1
+ ![alt text](https://github.com/frontegg/frontegg-nextjs/blob/master/logo.png)
2
2
 
3
- This library was generated with [Nx](https://nx.dev).
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.
4
5
 
5
- ## Running unit tests
6
+ ## Table of Contents
6
7
 
7
- Run `nx test nextjs` to execute the unit tests via [Jest](https://jestjs.io).
8
+ - [Installation](#installation)
9
+ - [Create new NextJS project](#create-new-nextjs-project)
10
+ - [Add to existing project](#add-to-existing-project)
11
+ - [Using Vercel platform with custom domain](#using-vercel-platform-with-custom-domain)
12
+ - [Getting Started](#getting-started)
13
+ - [Create Frontegg worksapce](#create-frontegg-worksapce)
14
+ - [Setup environment](#setup-environment)
15
+ - [Documentation](#documentation)
16
+ - [API Reference](#api-reference)
17
+ - [Frontegg Provider Options](#frontegg-provider-options)
18
+ - [getSession](#getsession)
19
+ - [withSSRSession](#withssrsession)
20
+ - [Next.js middlewares usage](#nextjs-middlewares-usage)
21
+ - for more [visit](https://docs.frontegg.com/docs/self-service-introduction)
22
+
23
+ ## Installation
24
+
25
+ ### Create new NextJS project
26
+
27
+ To start a new Create Next App project with TypeScript, you can run:
28
+
29
+ ```bash
30
+ npx create-next-app --example "https://github.com/frontegg/frontegg-nextjs" --example-path "apps/example" my-nextjs-app-name
31
+ ```
32
+
33
+ or
34
+
35
+ ```bash
36
+ yarn create next-app --example "https://github.com/frontegg/frontegg-nextjs" --example-path "apps/example" my-nextjs-app-name
37
+ ```
38
+
39
+ > 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.
40
+ >
41
+ > Global installations of `create-next-app` are no longer supported.
42
+
43
+ ### Add to existing project
44
+
45
+ To Add Frontegg to your existing Nextjs project, follow below steps:
46
+
47
+ 1. Use package manager to install Frontegg Next.JS library.
48
+
49
+ ```bash
50
+ npm install --save @frontegg/nextjs
51
+ ```
52
+
53
+ or
54
+
55
+ ```bash
56
+ yarn add --save @frontegg/nextjs
57
+ ```
58
+
59
+ 2. Wrap the default export with `withFronteggApp` in `./pages/_app.tsx`:
60
+
61
+ ```tsx
62
+ // ./pages/_app.tsx
63
+
64
+ import { withFronteggApp } from '@frontegg/nextjs';
65
+
66
+ function CustomApp({ Component, pageProps }: AppProps) {
67
+ return <Component {...pageProps} />;
68
+ }
69
+
70
+ export default withFronteggApp(CustomApp);
71
+ ```
72
+
73
+ 3. Create files for frontegg middleware under `./pages/api/frontegg/[...frontegg-middleware].ts`:
74
+
75
+ ```tsx
76
+ // ./pages/api/frontegg/[...frontegg-middleware].ts
77
+
78
+ export { fronteggMiddleware as default } from '@frontegg/nextjs';
79
+ ```
80
+
81
+ 4. Create placeholder pages for frontegg router under `./pages/[...frontegg-router].tsx`:
82
+
83
+ ```tsx
84
+ // ./pages/[...frontegg-router].tsx
85
+
86
+ export {
87
+ FronteggRouter as default,
88
+ FronteggRouterProps as getServerSideProps,
89
+ } from '@frontegg/nextjs';
90
+ ```
91
+
92
+ ### Using Vercel platform with custom domain
93
+
94
+ 1. Visit `https://vercel.com/[ACCOUNT_ID]/[PROJECT_ID]/settings/environment-variables`
95
+ 2. Add `FRONTEGG_APP_URL` environment variable for each Vercel Environment
96
+ ![vercel-settings-pages](https://github.com/frontegg/frontegg-nextjs/blob/master/vercel-environment.png)
97
+
98
+
99
+ ## Getting Started
100
+
101
+ ### Create Frontegg worksapce
102
+
103
+ Navigate to [Frontegg Portal Settgins](https://portal.frontegg.com/development/settings), If you don't have application
104
+ follow integration steps after signing up.
105
+
106
+ Next, configure the "Allowed Origins" in your application under "Domain" tab of the "Settings" page :
107
+
108
+ - http://localhost:3000 // for development environments
109
+ - https://my-company-domain.com // for production environments
110
+
111
+ Copy ClientID, Frontegg Domain from "Settings" page, You'll need these values in the next step.
112
+
113
+ ### Setup environment
114
+
115
+ To setup your Next.js application to communicate with Frontegg, you have to create a new file named `.env.local` under
116
+ your root project directory, this file will be used to store environment variables that will be used, configuration
117
+ options:
118
+
119
+ ```dotenv
120
+ # The AppUrl is to tell Frontegg your application hostname
121
+ FRONTEGG_APP_URL='http://localhost:3000'
122
+
123
+ # The Frontegg domain is your unique URL to connect to the Frontegg gateway
124
+ FRONTEGG_BASE_URL='https://{YOUR_SUB_DOMAIN}.frontegg.com'
125
+
126
+ # Your Frontegg application's Client ID
127
+ FRONTEGG_CLIENT_ID='{YOUR_APPLICATION_CLIENT_ID}'
128
+
129
+ # The statless session encruption password, used to encrypt
130
+ # jwt before sending it to the client side.
131
+ #
132
+ # For quick password generation use the following command:
133
+ # node -e "console.log(crypto.randomBytes(32).toString('hex'))"
134
+ FRONTEGG_ENCRYPTION_PASSWORD='{SESSION_ENCRYPTION_PASSWORD}'
135
+
136
+ # The statless session cookie name
137
+ FRONTEGG_COOKIE_NAME='fe_session'
138
+ ```
139
+
140
+ ## Documentation
141
+
142
+ ### API Reference
143
+
144
+ Visit [Frontegg Docs](https://docs.frontegg.com) for the full documentation.
145
+
146
+ ### Frontegg Provider Options
147
+
148
+ Pass seconds argument to `withFronteggApp` function in `_app.ts` file to customize
149
+ Frontegg library.
150
+
151
+ ```tsx
152
+ // ./pages/_app.tsx
153
+
154
+ import { withFronteggApp } from '@frontegg/nextjs';
155
+
156
+ function CustomApp({ Component, pageProps }: AppProps) {
157
+ return <Component {...pageProps} />;
158
+ }
159
+
160
+ export default withFronteggApp(CustomApp, {
161
+ /**
162
+ * Frontegg options for customizations
163
+ */
164
+ });
165
+ ```
166
+
167
+ ### getSession
168
+
169
+ For any pages that required AccessToken in Server Side, you can use:
170
+
171
+ ```tsx
172
+ import { GetServerSideProps } from 'next';
173
+ import { getSession } from '@frontegg/nextjs';
174
+
175
+ export default function MyPage({ products }) {
176
+ return (
177
+ <div>
178
+ <h1>My Page</h1>
179
+ {products}
180
+ </div>
181
+ );
182
+ }
183
+
184
+ export const getServerSideProps: GetServerSideProps = async (context) => {
185
+ const session = await getSession(context.req);
186
+ if (session) {
187
+ const { data } = await fetch('{external}/product', {
188
+ headers: {
189
+ Authorization: 'bearer ' + session.accessToken,
190
+ },
191
+ });
192
+ return { props: { products: data } };
193
+ }
194
+
195
+ return { props: { products: [] } };
196
+ };
197
+ ```
198
+
199
+ ### withSSRSession
200
+
201
+ withSSRSession HOC can be used to automatic redirect users to login screen if not logged in:
202
+
203
+ ```tsx
204
+ import { GetServerSideProps } from 'next';
205
+ import { withSSRSession } from '@frontegg/nextjs';
206
+
207
+ export default function MyPage({ products }) {
208
+ return (
209
+ <div>
210
+ <h1>My Page</h1>
211
+ {products}
212
+ </div>
213
+ );
214
+ }
215
+
216
+ export const getServerSideProps: GetServerSideProps = withSSRSession(
217
+ async (context, session) => {
218
+ const { data } = await fetch('{external}/product', {
219
+ headers: {
220
+ Authorization: 'bearer ' + session.accessToken,
221
+ },
222
+ });
223
+ return { props: { products: data } };
224
+ }
225
+ );
226
+ ```
227
+
228
+ ## Next.js middlewares usage
229
+
230
+ To prevent access unauthenticated user to all routes, use [Next.js middlewares](https://nextjs.org/docs/advanced-features/middleware).
231
+
232
+ **Note: If you were using Middleware prior to 12.2, please see the [upgrade guide](https://nextjs.org/docs/messages/middleware-upgrade-guide).**
233
+
234
+ ```ts
235
+ // /middleware.ts
236
+ import { NextResponse } from "next/server";
237
+ import type { NextRequest } from "next/server";
238
+ import { getSession } from '@frontegg/nextjs';
239
+
240
+ export const middleware = async (request: NextRequest) => {
241
+ const session = await getSession(request);
242
+
243
+ console.log("middleware session", session);
244
+
245
+ if(!session){
246
+ // redirect unauthenticated user to /account/login page
247
+ return NextResponse.redirect(new URL('/account/login', req.url))
248
+ }
249
+
250
+ return NextResponse.next();
251
+ };
252
+
253
+ export const config = {
254
+ matcher: "/(.*)",
255
+ };
256
+ ```
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@frontegg/nextjs",
3
- "version": "6.7.4-alpha.3470067913",
3
+ "version": "6.7.4",
4
4
  "dependencies": {
5
- "@frontegg/js": "6.43.0-alpha.3",
6
- "@frontegg/react-hooks": "6.43.0-alpha.3",
5
+ "@frontegg/js": "6.43.0",
6
+ "@frontegg/react-hooks": "6.43.0",
7
7
  "jose": "^4.9.2",
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
+ }