@frontegg/nextjs 6.7.7-alpha.3684130280 → 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.
Files changed (2) hide show
  1. package/README.md +4 -256
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,259 +1,7 @@
1
- ![alt text](https://github.com/frontegg/frontegg-nextjs/blob/master/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
- - [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
- ```
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.7-alpha.3684130280",
3
+ "version": "6.7.8-alpha.3694488191",
4
4
  "dependencies": {
5
- "@frontegg/js": "6.51.0",
6
- "@frontegg/react-hooks": "6.51.0",
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",