@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.
- package/CHANGELOG.md +39 -0
- package/README.md +253 -4
- 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
|
-
|
|
1
|
+

|
|
2
2
|
|
|
3
|
-
|
|
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
|
-
##
|
|
6
|
+
## Table of Contents
|
|
6
7
|
|
|
7
|
-
|
|
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
|
+

|
|
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
|
|
3
|
+
"version": "6.7.4",
|
|
4
4
|
"dependencies": {
|
|
5
|
-
"@frontegg/js": "6.43.0
|
|
6
|
-
"@frontegg/react-hooks": "6.43.0
|
|
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
|
+
}
|