@frontegg/nextjs 6.7.7 → 6.7.8-alpha.3694488191
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.
- package/README.md +4 -256
- package/package.json +4 -4
- package/CHANGELOG.md +0 -82
package/README.md
CHANGED
|
@@ -1,259 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
# nextjs
|
|
2
2
|
|
|
3
|
-
|
|
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
|
-
##
|
|
5
|
+
## Running unit tests
|
|
7
6
|
|
|
8
|
-
|
|
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
|
-

|
|
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
|
-
```
|
|
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.7.
|
|
3
|
+
"version": "6.7.8-alpha.3694488191",
|
|
4
4
|
"dependencies": {
|
|
5
|
-
"@frontegg/js": "6.
|
|
6
|
-
"@frontegg/react-hooks": "6.
|
|
5
|
+
"@frontegg/js": "6.52.0-alpha.0",
|
|
6
|
+
"@frontegg/react-hooks": "6.52.0-alpha.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
|
+
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
# Change Log
|
|
2
|
-
|
|
3
|
-
## [6.7.7](https://github.com/frontegg/frontegg-nextjs/compare/v6.7.6...v6.7.7) (2022-12-13)
|
|
4
|
-
|
|
5
|
-
- Fixed MFA flow issues
|
|
6
|
-
- Added support for subscriptions billing collection
|
|
7
|
-
- Fixed the issue of the OTC screen submit button is disabled on mobile devices
|
|
8
|
-
- Added SCIM section in admin portal under FF
|
|
9
|
-
|
|
10
|
-
## [6.7.6](https://github.com/frontegg/frontegg-nextjs/compare/v6.7.5...v6.7.6) (2022-12-12)
|
|
11
|
-
# v6.7.6
|
|
12
|
-
• Fixed ignoring urlPrefix issue
|
|
13
|
-
• Added the ability to Invite a user by bulk API in the admin portal
|
|
14
|
-
• Fixed OTC digits are not visible on mobile devices
|
|
15
|
-
• Added MFA devices management section in the admin portal under FF
|
|
16
|
-
• Fixed the ability to copy invite link for dynamic base URL as well
|
|
17
|
-
• Added new abilities to MFA flows under FF
|
|
18
|
-
• Added support for providing an external CDN to load fonts in Frontegg components
|
|
19
|
-
• Update hide fields API according to new security tabs naming
|
|
20
|
-
• Changed max length for secret fields to 100 characters
|
|
21
|
-
• Added support for customizing invite user dialog fields
|
|
22
|
-
• Fixed creating custom webhook on the Admin Portal is sent with the event ID and not with the event Key
|
|
23
|
-
|
|
24
|
-
### NextJS Wrapper 6.7.6:
|
|
25
|
-
- Improved SSR support for `withFronteggApp` function
|
|
26
|
-
|
|
27
|
-
## [6.7.5](https://github.com/frontegg/frontegg-nextjs/compare/v6.7.4...v6.7.5) (2022-11-28)
|
|
28
|
-
|
|
29
|
-
# v6.7.5
|
|
30
|
-
- Update hide fields API according to new security tabs naming
|
|
31
|
-
- Changed max length for secret fields to 100 characters
|
|
32
|
-
- Added support for customizing invite user dialog fields
|
|
33
|
-
- Added support for admin portal pre-defined theme options (dark, vivid, modern, and classic themes)
|
|
34
|
-
- Added support for customizing admin portal navigation hover color
|
|
35
|
-
- Fixed typo of Andorra country in countries dropdown
|
|
36
|
-
- Fixed select popup alignment issue
|
|
37
|
-
- 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)
|
|
38
|
-
- Added mock for feature flags API for admin portal preview mode
|
|
39
|
-
- Fixed resend invitation and activate your account API calls
|
|
40
|
-
- Fixed creating custom webhook on the Admin Portal is sent with the event ID and not with the event Key
|
|
41
|
-
- Added support for customizing fields and tabs in the admin portal
|
|
42
|
-
|
|
43
|
-
### NextJS Wrapper 6.7.5:
|
|
44
|
-
- Updated next readme to include hosted login box integration
|
|
45
|
-
|
|
46
|
-
## [6.7.4](https://github.com/frontegg/frontegg-nextjs/compare/v6.7.3...v6.7.4) (2022-11-15)
|
|
47
|
-
|
|
48
|
-
- Fixed redirect to the app after signing up without forced email verification
|
|
49
|
-
- Fixed admin portal dark theme
|
|
50
|
-
- Added the ability to customize fields and tabs in the admin portal
|
|
51
|
-
- Fixed cleaning up error messages on sign up page when re-visiting the page
|
|
52
|
-
- Fixed resizing the login box when the logo is null
|
|
53
|
-
- Fix the ReCaptcha timeout issue
|
|
54
|
-
|
|
55
|
-
## [6.7.3](https://github.com/frontegg/frontegg-nextjs/compare/v6.7.2...v6.7.3) (2022-11-11)
|
|
56
|
-
|
|
57
|
-
- FR-9186 - support ssr with session and refresh token
|
|
58
|
-
- FR-9614 - Add support for innerThemeProvider for admin portal pages and tabs
|
|
59
|
-
|
|
60
|
-
- FR-9186 - fix pipeline
|
|
61
|
-
### AdminPortal 6.36.0:
|
|
62
|
-
-
|
|
63
|
-
|
|
64
|
-
### AdminPortal 6.35.0:
|
|
65
|
-
-
|
|
66
|
-
### AdminPortal 6.34.0:
|
|
67
|
-
-
|
|
68
|
-
|
|
69
|
-
### NextJS Wrapper 6.7.3:
|
|
70
|
-
- FR-9544 - remove console logs
|
|
71
|
-
- FR-9544 - Add support for keep session a live
|
|
72
|
-
- FR-9187 - split cookie if exceeds length of 4096
|
|
73
|
-
|
|
74
|
-
## [6.7.2](https://github.com/frontegg/frontegg-nextjs/compare/v6.7.1...v6.7.2) (2022-10-26)
|
|
75
|
-
|
|
76
|
-
### AdminPortal 6.34.0:
|
|
77
|
-
-
|
|
78
|
-
|
|
79
|
-
### NextJS Wrapper 6.7.2:
|
|
80
|
-
- FR-9186 - Fix Changelog
|
|
81
|
-
- FR-9186 - Generate changelog for pre-release / releases based on AdminPortal and LoginBox changes
|
|
82
|
-
|