@frontegg/nextjs 6.7.5-alpha.3532620063 → 6.7.5

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