@workos-inc/authkit-nextjs 0.9.0 → 0.10.1

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 (18) hide show
  1. package/README.md +18 -0
  2. package/dist/cjs/actions.d.ts +6 -0
  3. package/dist/cjs/actions.js +14 -0
  4. package/dist/cjs/actions.js.map +1 -0
  5. package/dist/cjs/index.d.ts +2 -1
  6. package/dist/cjs/index.js +3 -1
  7. package/dist/cjs/index.js.map +1 -1
  8. package/dist/cjs/provider.d.ts +11 -0
  9. package/dist/cjs/provider.js +53 -0
  10. package/dist/cjs/provider.js.map +1 -0
  11. package/dist/cjs/workos.d.ts +1 -1
  12. package/dist/cjs/workos.js +1 -1
  13. package/dist/cjs/workos.js.map +1 -1
  14. package/package.json +1 -1
  15. package/src/actions.ts +10 -0
  16. package/src/index.ts +2 -0
  17. package/src/provider.tsx +62 -0
  18. package/src/workos.ts +1 -1
package/README.md CHANGED
@@ -92,6 +92,24 @@ export const config = { matcher: ['/', '/admin'] };
92
92
 
93
93
  ## Usage
94
94
 
95
+ ### Wrap your app in `AuthKitProvider`
96
+
97
+ Use `AuthKitProvider` to wrap your app layout, which adds some protections for auth edge cases.
98
+
99
+ ```jsx
100
+ import { AuthKitProvider } from '@workos-inc/authkit-nextjs';
101
+
102
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
103
+ return (
104
+ <html lang="en">
105
+ <body>
106
+ <AuthKitProvider>{children}</AuthKitProvider>
107
+ </body>
108
+ </html>
109
+ );
110
+ }
111
+ ```
112
+
95
113
  ### Get the current user
96
114
 
97
115
  For pages where you want to display a signed-in and signed-out view, use `getUser` to retrieve the user profile from WorkOS.
package/dist/cjs/actions.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * This action is only accessible to authenticated users,
3
+ * there is no need to check the session here as the middleware will
4
+ * be responsible for that.
5
+ */
6
+ export declare const checkSessionAction: () => Promise<boolean>;
package/dist/cjs/actions.js ADDED
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ 'use server';
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.checkSessionAction = void 0;
5
+ /**
6
+ * This action is only accessible to authenticated users,
7
+ * there is no need to check the session here as the middleware will
8
+ * be responsible for that.
9
+ */
10
+ const checkSessionAction = async () => {
11
+ return true;
12
+ };
13
+ exports.checkSessionAction = checkSessionAction;
14
+ //# sourceMappingURL=actions.js.map
package/dist/cjs/actions.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"actions.js","sourceRoot":"","sources":["../../src/actions.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AAEb;;;;GAIG;AACI,MAAM,kBAAkB,GAAG,KAAK,IAAI,EAAE;IAC3C,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAFW,QAAA,kBAAkB,sBAE7B"}
package/dist/cjs/index.d.ts CHANGED
@@ -3,4 +3,5 @@ import { authkitMiddleware } from './middleware.js';
3
3
  import { getUser, refreshSession } from './session.js';
4
4
  import { getSignInUrl, getSignUpUrl, signOut } from './auth.js';
5
5
  import { Impersonation } from './impersonation.js';
6
- export { handleAuth, authkitMiddleware, getSignInUrl, getSignUpUrl, getUser, refreshSession, signOut, Impersonation, };
6
+ import { AuthKitProvider } from './provider.js';
7
+ export { handleAuth, authkitMiddleware, getSignInUrl, getSignUpUrl, getUser, refreshSession, signOut, Impersonation, AuthKitProvider, };
package/dist/cjs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Impersonation = exports.signOut = exports.refreshSession = exports.getUser = exports.getSignUpUrl = exports.getSignInUrl = exports.authkitMiddleware = exports.handleAuth = void 0;
3
+ exports.AuthKitProvider = exports.Impersonation = exports.signOut = exports.refreshSession = exports.getUser = exports.getSignUpUrl = exports.getSignInUrl = exports.authkitMiddleware = exports.handleAuth = void 0;
4
4
  const authkit_callback_route_js_1 = require("./authkit-callback-route.js");
5
5
  Object.defineProperty(exports, "handleAuth", { enumerable: true, get: function () { return authkit_callback_route_js_1.handleAuth; } });
6
6
  const middleware_js_1 = require("./middleware.js");
@@ -14,4 +14,6 @@ Object.defineProperty(exports, "getSignUpUrl", { enumerable: true, get: function
14
14
  Object.defineProperty(exports, "signOut", { enumerable: true, get: function () { return auth_js_1.signOut; } });
15
15
  const impersonation_js_1 = require("./impersonation.js");
16
16
  Object.defineProperty(exports, "Impersonation", { enumerable: true, get: function () { return impersonation_js_1.Impersonation; } });
17
+ const provider_js_1 = require("./provider.js");
18
+ Object.defineProperty(exports, "AuthKitProvider", { enumerable: true, get: function () { return provider_js_1.AuthKitProvider; } });
17
19
  //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,2EAAyD;AAOvD,2FAPO,sCAAU,OAOP;AANZ,mDAAoD;AAQlD,kGARO,iCAAiB,OAQP;AAPnB,6CAAuD;AAWrD,wFAXO,oBAAO,OAWP;AACP,+FAZgB,2BAAc,OAYhB;AAXhB,uCAAgE;AAQ9D,6FARO,sBAAY,OAQP;AACZ,6FATqB,sBAAY,OASrB;AAGZ,wFAZmC,iBAAO,OAYnC;AAXT,yDAAmD;AAajD,8FAbO,gCAAa,OAaP"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,2EAAyD;AAQvD,2FARO,sCAAU,OAQP;AAPZ,mDAAoD;AASlD,kGATO,iCAAiB,OASP;AARnB,6CAAuD;AAYrD,wFAZO,oBAAO,OAYP;AACP,+FAbgB,2BAAc,OAahB;AAZhB,uCAAgE;AAS9D,6FATO,sBAAY,OASP;AACZ,6FAVqB,sBAAY,OAUrB;AAGZ,wFAbmC,iBAAO,OAanC;AAZT,yDAAmD;AAcjD,8FAdO,gCAAa,OAcP;AAbf,+CAAgD;AAc9C,gGAdO,6BAAe,OAcP"}
package/dist/cjs/provider.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import * as React from 'react';
2
+ interface AuthKitProviderProps {
3
+ children: React.ReactNode;
4
+ /**
5
+ * Customize what happens when a session is expired. By default,the entire page will be reloaded.
6
+ * You can also pass this as `false` to disable the expired session checks.
7
+ */
8
+ onSessionExpired?: false | (() => void);
9
+ }
10
+ export declare const AuthKitProvider: ({ children, onSessionExpired }: AuthKitProviderProps) => React.JSX.Element;
11
+ export {};
package/dist/cjs/provider.js ADDED
@@ -0,0 +1,53 @@
1
+ "use strict";
2
+ 'use client';
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.AuthKitProvider = void 0;
5
+ const tslib_1 = require("tslib");
6
+ const React = tslib_1.__importStar(require("react"));
7
+ const actions_js_1 = require("./actions.js");
8
+ const AuthKitProvider = ({ children, onSessionExpired = false }) => {
9
+ React.useEffect(() => {
10
+ // Return early if the session expired checks are disabled.
11
+ if (onSessionExpired === false) {
12
+ return;
13
+ }
14
+ let visibilityChangedCalled = false;
15
+ const handleVisibilityChange = async () => {
16
+ if (visibilityChangedCalled) {
17
+ return;
18
+ }
19
+ // In the case where we're using middleware auth mode, a user that has signed out in a different tab
20
+ // will run into an issue if they attempt to hit a server action in the original tab.
21
+ // This will force a refresh of the page in that case, which will redirect them to the sign-in page.
22
+ if (document.visibilityState === 'visible') {
23
+ visibilityChangedCalled = true;
24
+ try {
25
+ const hasSession = await (0, actions_js_1.checkSessionAction)();
26
+ if (!hasSession) {
27
+ throw new Error('Session expired');
28
+ }
29
+ }
30
+ catch (error) {
31
+ if (onSessionExpired) {
32
+ onSessionExpired();
33
+ }
34
+ else {
35
+ window.location.reload();
36
+ }
37
+ }
38
+ finally {
39
+ visibilityChangedCalled = false;
40
+ }
41
+ }
42
+ };
43
+ window.addEventListener('visibilitychange', handleVisibilityChange);
44
+ window.addEventListener('focus', handleVisibilityChange);
45
+ return () => {
46
+ window.removeEventListener('focus', handleVisibilityChange);
47
+ window.removeEventListener('visibilitychange', handleVisibilityChange);
48
+ };
49
+ }, [onSessionExpired]);
50
+ return React.createElement(React.Fragment, null, children);
51
+ };
52
+ exports.AuthKitProvider = AuthKitProvider;
53
+ //# sourceMappingURL=provider.js.map
package/dist/cjs/provider.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"provider.js","sourceRoot":"","sources":["../../src/provider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,qDAA+B;AAC/B,6CAAkD;AAW3C,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,gBAAgB,GAAG,KAAK,EAAwB,EAAE,EAAE;IAC9F,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,2DAA2D;QAC3D,IAAI,gBAAgB,KAAK,KAAK,EAAE,CAAC;YAC/B,OAAO;QACT,CAAC;QAED,IAAI,uBAAuB,GAAG,KAAK,CAAC;QAEpC,MAAM,sBAAsB,GAAG,KAAK,IAAI,EAAE;YACxC,IAAI,uBAAuB,EAAE,CAAC;gBAC5B,OAAO;YACT,CAAC;YAED,oGAAoG;YACpG,qFAAqF;YACrF,oGAAoG;YACpG,IAAI,QAAQ,CAAC,eAAe,KAAK,SAAS,EAAE,CAAC;gBAC3C,uBAAuB,GAAG,IAAI,CAAC;gBAE/B,IAAI,CAAC;oBACH,MAAM,UAAU,GAAG,MAAM,IAAA,+BAAkB,GAAE,CAAC;oBAC9C,IAAI,CAAC,UAAU,EAAE,CAAC;wBAChB,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC;oBACrC,CAAC;gBACH,CAAC;gBAAC,OAAO,KAAK,EAAE,CAAC;oBACf,IAAI,gBAAgB,EAAE,CAAC;wBACrB,gBAAgB,EAAE,CAAC;oBACrB,CAAC;yBAAM,CAAC;wBACN,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;oBAC3B,CAAC;gBACH,CAAC;wBAAS,CAAC;oBACT,uBAAuB,GAAG,KAAK,CAAC;gBAClC,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAAC;QACpE,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC;QAEzD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC;YAC5D,MAAM,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAAC;QACzE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,0CAAG,QAAQ,CAAI,CAAC;AACzB,CAAC,CAAC;AA/CW,QAAA,eAAe,mBA+C1B"}
package/dist/cjs/workos.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { WorkOS } from '@workos-inc/node';
2
- export declare const VERSION = "0.9.0";
2
+ export declare const VERSION = "0.10.1";
3
3
  declare const workos: WorkOS;
4
4
  export { workos };
package/dist/cjs/workos.js CHANGED
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.workos = exports.VERSION = void 0;
4
4
  const node_1 = require("@workos-inc/node");
5
5
  const env_variables_js_1 = require("./env-variables.js");
6
- exports.VERSION = '0.9.0';
6
+ exports.VERSION = '0.10.1';
7
7
  const options = {
8
8
  apiHostname: env_variables_js_1.WORKOS_API_HOSTNAME,
9
9
  https: env_variables_js_1.WORKOS_API_HTTPS ? env_variables_js_1.WORKOS_API_HTTPS === 'true' : true,
package/dist/cjs/workos.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"workos.js","sourceRoot":"","sources":["../../src/workos.ts"],"names":[],"mappings":";;;AAAA,2CAA0C;AAC1C,yDAA4G;AAE/F,QAAA,OAAO,GAAG,OAAO,CAAC;AAE/B,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,sCAAmB;IAChC,KAAK,EAAE,mCAAgB,CAAC,CAAC,CAAC,mCAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI;IAC5D,IAAI,EAAE,kCAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,kCAAe,CAAC,CAAC,CAAC,CAAC,SAAS;IAC7D,OAAO,EAAE;QACP,IAAI,EAAE,gBAAgB;QACtB,OAAO,EAAE,eAAO;KACjB;CACF,CAAC;AAEF,+BAA+B;AAC/B,MAAM,MAAM,GAAG,IAAI,aAAM,CAAC,iCAAc,EAAE,OAAO,CAAC,CAAC;AAE1C,wBAAM"}
1
+ {"version":3,"file":"workos.js","sourceRoot":"","sources":["../../src/workos.ts"],"names":[],"mappings":";;;AAAA,2CAA0C;AAC1C,yDAA4G;AAE/F,QAAA,OAAO,GAAG,QAAQ,CAAC;AAEhC,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,sCAAmB;IAChC,KAAK,EAAE,mCAAgB,CAAC,CAAC,CAAC,mCAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI;IAC5D,IAAI,EAAE,kCAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,kCAAe,CAAC,CAAC,CAAC,CAAC,SAAS;IAC7D,OAAO,EAAE;QACP,IAAI,EAAE,gBAAgB;QACtB,OAAO,EAAE,eAAO;KACjB;CACF,CAAC;AAEF,+BAA+B;AAC/B,MAAM,MAAM,GAAG,IAAI,aAAM,CAAC,iCAAc,EAAE,OAAO,CAAC,CAAC;AAE1C,wBAAM"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workos-inc/authkit-nextjs",
3
- "version": "0.9.0",
3
+ "version": "0.10.1",
4
4
  "description": "Authentication and session helpers for using WorkOS & AuthKit with Next.js",
5
5
  "sideEffects": false,
6
6
  "type": "commonjs",
package/src/actions.ts ADDED
@@ -0,0 +1,10 @@
1
+ 'use server';
2
+
3
+ /**
4
+ * This action is only accessible to authenticated users,
5
+ * there is no need to check the session here as the middleware will
6
+ * be responsible for that.
7
+ */
8
+ export const checkSessionAction = async () => {
9
+ return true;
10
+ };
package/src/index.ts CHANGED
@@ -3,6 +3,7 @@ import { authkitMiddleware } from './middleware.js';
3
3
  import { getUser, refreshSession } from './session.js';
4
4
  import { getSignInUrl, getSignUpUrl, signOut } from './auth.js';
5
5
  import { Impersonation } from './impersonation.js';
6
+ import { AuthKitProvider } from './provider.js';
6
7
 
7
8
  export {
8
9
  handleAuth,
@@ -16,4 +17,5 @@ export {
16
17
  signOut,
17
18
  //
18
19
  Impersonation,
20
+ AuthKitProvider,
19
21
  };
package/src/provider.tsx ADDED
@@ -0,0 +1,62 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import { checkSessionAction } from './actions.js';
5
+
6
+ interface AuthKitProviderProps {
7
+ children: React.ReactNode;
8
+ /**
9
+ * Customize what happens when a session is expired. By default,the entire page will be reloaded.
10
+ * You can also pass this as `false` to disable the expired session checks.
11
+ */
12
+ onSessionExpired?: false | (() => void);
13
+ }
14
+
15
+ export const AuthKitProvider = ({ children, onSessionExpired = false }: AuthKitProviderProps) => {
16
+ React.useEffect(() => {
17
+ // Return early if the session expired checks are disabled.
18
+ if (onSessionExpired === false) {
19
+ return;
20
+ }
21
+
22
+ let visibilityChangedCalled = false;
23
+
24
+ const handleVisibilityChange = async () => {
25
+ if (visibilityChangedCalled) {
26
+ return;
27
+ }
28
+
29
+ // In the case where we're using middleware auth mode, a user that has signed out in a different tab
30
+ // will run into an issue if they attempt to hit a server action in the original tab.
31
+ // This will force a refresh of the page in that case, which will redirect them to the sign-in page.
32
+ if (document.visibilityState === 'visible') {
33
+ visibilityChangedCalled = true;
34
+
35
+ try {
36
+ const hasSession = await checkSessionAction();
37
+ if (!hasSession) {
38
+ throw new Error('Session expired');
39
+ }
40
+ } catch (error) {
41
+ if (onSessionExpired) {
42
+ onSessionExpired();
43
+ } else {
44
+ window.location.reload();
45
+ }
46
+ } finally {
47
+ visibilityChangedCalled = false;
48
+ }
49
+ }
50
+ };
51
+
52
+ window.addEventListener('visibilitychange', handleVisibilityChange);
53
+ window.addEventListener('focus', handleVisibilityChange);
54
+
55
+ return () => {
56
+ window.removeEventListener('focus', handleVisibilityChange);
57
+ window.removeEventListener('visibilitychange', handleVisibilityChange);
58
+ };
59
+ }, [onSessionExpired]);
60
+
61
+ return <>{children}</>;
62
+ };
package/src/workos.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { WorkOS } from '@workos-inc/node';
2
2
  import { WORKOS_API_HOSTNAME, WORKOS_API_HTTPS, WORKOS_API_KEY, WORKOS_API_PORT } from './env-variables.js';
3
3
 
4
- export const VERSION = '0.9.0';
4
+ export const VERSION = '0.10.1';
5
5
 
6
6
  const options = {
7
7
  apiHostname: WORKOS_API_HOSTNAME,