@stytch/nextjs 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @stytch/nextjs
 
+## 2.0.1
+
+### Patch Changes
+
+- f1810c4: Add React Native OAuth callback, PKCE fix
+- Updated dependencies [f1810c4]
+  - @stytch/vanilla-js@0.10.2
+
 ## 2.0.0
 
 ### Minor Changes

package/README.md

@@ -41,9 +41,9 @@ const App = () => {
       },
     },
     styles: {
+      container: { width: '321px' },
+      colors: { primary: '#0577CA' },
       fontFamily: '"Helvetica New", Helvetica, sans-serif',
-      width: '321px',
-      primaryColor: '#0577CA',
     },
     callbacks: {
       onEvent: (message) => console.log(message),
@@ -158,3 +158,4 @@ We've made a number of small changes to our naming conventions to make the API c
 - The `<Stytch />` login component is now called `<StytchLogin />`
 - The `OAuthProvidersTypes` enum is now called `OAuthProviders`
 - The `SDKProductTypes` enum is now called `Products`
+- There are some additional changes to the `styles` config documented [here](https://stytch.com/docs/sdks/javascript-sdk#resources_migration-guide_v-zero-five)

package/dist/b2b/index.esm.js

@@ -713,21 +713,23 @@ var nt = Promise.resolve({ pkceRequiredForEmailMagicLinks: !1 }), ot = function
             case "end": return e.stop();
         } }), e, this); }))); } }, this.authenticate = function (t) { return K(o, void 0, void 0, y().mark((function e() { var r, n, o; return y().wrap((function (e) { for (;;)
     switch (e.prev = e.next) {
-        case 0: return X("stytch.magicLinks.authenticate").isString("magic_links_token", t.magic_links_token).isNumber("session_duration_minutes", t.session_duration_minutes), n = Object.assign({ pkce_code_verifier: null === (r = this._pkceManager.getPKPair()) || void 0 === r ? void 0 : r.code_verifier }, t), e.next = 4, this._networkClient.fetchSDK({ url: "/b2b/magic_links/authenticate", body: n, errorMessage: "Failed to authenticate token.", method: "POST" });
-        case 4: return o = e.sent, this._pkceManager.clearPKPair(), this._subscriptionService.updateStateAndTokens({ state: { session: o.member_session, member: o.member }, session_token: o.session_token, session_jwt: o.session_jwt }), e.abrupt("return", o);
-        case 8:
+        case 0: return X("stytch.magicLinks.authenticate").isString("magic_links_token", t.magic_links_token).isNumber("session_duration_minutes", t.session_duration_minutes), e.next = 3, this._pkceManager.getPKPair();
+        case 3: return r = e.sent, n = Object.assign({ pkce_code_verifier: null == r ? void 0 : r.code_verifier }, t), e.next = 7, this._networkClient.fetchSDK({ url: "/b2b/magic_links/authenticate", body: n, errorMessage: "Failed to authenticate token.", method: "POST" });
+        case 7: return o = e.sent, this._pkceManager.clearPKPair(), this._subscriptionService.updateStateAndTokens({ state: { session: o.member_session, member: o.member }, session_token: o.session_token, session_jwt: o.session_jwt }), e.abrupt("return", o);
+        case 11:
         case "end": return e.stop();
     } }), e, this); }))); }; } return b(t, [{ key: "getCodeChallenge", value: function () { return K(this, void 0, void 0, y().mark((function t() { var e; return y().wrap((function (t) { for (;;)
             switch (t.prev = t.next) {
-                case 0:
-                    if (!(e = this._pkceManager.getPKPair())) {
-                        t.next = 3;
+                case 0: return t.next = 2, this._pkceManager.getPKPair();
+                case 2:
+                    if (!(e = t.sent)) {
+                        t.next = 5;
                         break;
                     }
                     return t.abrupt("return", e.code_challenge);
-                case 3: return t.next = 5, this._pkceManager.startPKCETransaction();
-                case 5: return e = t.sent, t.abrupt("return", e.code_challenge);
-                case 7:
+                case 5: return t.next = 7, this._pkceManager.startPKCETransaction();
+                case 7: return e = t.sent, t.abrupt("return", e.code_challenge);
+                case 9:
                 case "end": return t.stop();
             } }), t, this); }))); } }]), t; }(), it = b((function t(e, r) { var n = this; g(this, t), this._networkClient = e, this._subscriptionService = r, this.get = function () { return K(n, void 0, void 0, y().mark((function t() { var e; return y().wrap((function (t) { for (;;)
     switch (t.prev = t.next) {
@@ -737,9 +739,10 @@ var nt = Promise.resolve({ pkceRequiredForEmailMagicLinks: !1 }), ot = function
         case "end": return t.stop();
     } }), t, this); }))); }, this.getSync = function () { return n._subscriptionService.getMember(); }, this.onChange = function (t) { return n._subscriptionService.subscribeToState((function (e) { var r; return t(null !== (r = null == e ? void 0 : e.member) && void 0 !== r ? r : null); })); }; })), at = function () { function t(e, r, n, o, i) { g(this, t), this._networkClient = e, this._subscriptionService = r, this._pkceManager = n, this._dynamicConfig = o, this._config = i; } return b(t, [{ key: "authenticate", value: function (t) { return K(this, void 0, void 0, y().mark((function e() { var r, n; return y().wrap((function (e) { for (;;)
             switch (e.prev = e.next) {
-                case 0: return X("stytch.sso.authenticate").isString("sso_token", t.sso_token).isNumber("session_duration_minutes", t.session_duration_minutes), (r = this._pkceManager.getPKPair()) || J.warn("No code verifier found in local storage for SSO flow.\nConsider using stytch.oauth.$provider.start() to add PKCE to your OAuth flows for added security.\nSee https://stytch.com/docs/oauth#guides_pkce for more information."), e.next = 5, this._networkClient.fetchSDK({ url: "/sso/authenticate", method: "POST", body: Object.assign({ pkce_code_verifier: null == r ? void 0 : r.code_verifier }, t), errorMessage: "Failed to authenticate token" });
-                case 5: return n = e.sent, this._pkceManager.clearPKPair(), this._subscriptionService.updateStateAndTokens({ state: { session: n.member_session, member: n.member }, session_token: n.session_token, session_jwt: n.session_jwt }), e.abrupt("return", n);
-                case 9:
+                case 0: return X("stytch.sso.authenticate").isString("sso_token", t.sso_token).isNumber("session_duration_minutes", t.session_duration_minutes), e.next = 3, this._pkceManager.getPKPair();
+                case 3: return (r = e.sent) || J.warn("No code verifier found in local storage for SSO flow.\nConsider using stytch.oauth.$provider.start() to add PKCE to your OAuth flows for added security.\nSee https://stytch.com/docs/oauth#guides_pkce for more information."), e.next = 7, this._networkClient.fetchSDK({ url: "/sso/authenticate", method: "POST", body: Object.assign({ pkce_code_verifier: null == r ? void 0 : r.code_verifier }, t), errorMessage: "Failed to authenticate token" });
+                case 7: return n = e.sent, this._pkceManager.clearPKPair(), this._subscriptionService.updateStateAndTokens({ state: { session: n.member_session, member: n.member }, session_token: n.session_token, session_jwt: n.session_jwt }), e.abrupt("return", n);
+                case 11:
                 case "end": return e.stop();
             } }), e, this); }))); } }, { key: "getBaseApiUrl", value: function () { return K(this, void 0, void 0, y().mark((function t() { return y().wrap((function (t) { for (;;)
             switch (t.prev = t.next) {
@@ -806,7 +809,7 @@ catch (t) {
 catch (t) {
     i(t);
 } } function c(t) { var e; t.done ? o(t.value) : (e = t.value, e instanceof r ? e : new r((function (t) { t(e); }))).then(a, s); } c((n = n.apply(t, e || [])).next()); })); }
-var ht = function () { function t(e, r, n, o) { c(this, t), this._publicToken = e, this._subscriptionDataLayer = r, this.baseURL = n, this.additionalTelemetryDataFn = o, this.updateSessionToken = function () { return null; }, this.eventLogger = new rt({ maxBatchSize: tt, intervalDurationMs: et, logEventURL: this.buildSDKUrl("/events") }); } return l(t, [{ key: "logEvent", value: function (t) { var e = t.name, r = t.details, n = t.error, o = void 0 === n ? {} : n; this.eventLogger.logEvent(this.createTelemetryBlob(), { public_token: this._publicToken, event_name: e, details: r, error_code: o.error_code, error_description: o.error_description, http_status_code: o.http_status_code }); } }, { key: "createTelemetryBlob", value: function () { return Object.assign(Object.assign({ event_id: "event-id-".concat(V()), app_session_id: "app-session-id-".concat(V()), persistent_id: "persistent-id-".concat(V()), client_sent_at: (new Date).toISOString(), timezone: Intl.DateTimeFormat().resolvedOptions().timeZone }, this.additionalTelemetryDataFn()), { app: { identifier: window.location.hostname }, sdk: { identifier: "Stytch.js Javascript SDK", version: "0.10.0" } }); } }, { key: "fetchSDK", value: function (t) { var e = t.url, r = t.body, n = t.errorMessage, o = t.method; return ft(this, void 0, void 0, s().mark((function t() { var i, a, c, u; return s().wrap((function (t) { for (;;)
+var ht = function () { function t(e, r, n, o) { c(this, t), this._publicToken = e, this._subscriptionDataLayer = r, this.baseURL = n, this.additionalTelemetryDataFn = o, this.updateSessionToken = function () { return null; }, this.eventLogger = new rt({ maxBatchSize: tt, intervalDurationMs: et, logEventURL: this.buildSDKUrl("/events") }); } return l(t, [{ key: "logEvent", value: function (t) { var e = t.name, r = t.details, n = t.error, o = void 0 === n ? {} : n; this.eventLogger.logEvent(this.createTelemetryBlob(), { public_token: this._publicToken, event_name: e, details: r, error_code: o.error_code, error_description: o.error_description, http_status_code: o.http_status_code }); } }, { key: "createTelemetryBlob", value: function () { return Object.assign(Object.assign({ event_id: "event-id-".concat(V()), app_session_id: "app-session-id-".concat(V()), persistent_id: "persistent-id-".concat(V()), client_sent_at: (new Date).toISOString(), timezone: Intl.DateTimeFormat().resolvedOptions().timeZone }, this.additionalTelemetryDataFn()), { app: { identifier: window.location.hostname }, sdk: { identifier: "Stytch.js Javascript SDK", version: "0.10.2" } }); } }, { key: "fetchSDK", value: function (t) { var e = t.url, r = t.body, n = t.errorMessage, o = t.method; return ft(this, void 0, void 0, s().mark((function t() { var i, a, c, u; return s().wrap((function (t) { for (;;)
             switch (t.prev = t.next) {
                 case 0: return i = this._subscriptionDataLayer.readSessionCookie().session_token, a = "Basic " + window.btoa(this._publicToken + ":" + (i || this._publicToken)), c = window.btoa(JSON.stringify(this.createTelemetryBlob())), u = window.location.origin, t.abrupt("return", Z({ basicAuthHeader: a, body: r, errorMessage: n, finalURL: this.buildSDKUrl(e), method: o, xSDKClientHeader: c, xSDKParentHostHeader: u }));
                 case 5:

package/dist/b2b/index.js

@@ -721,21 +721,23 @@ var nt = Promise.resolve({ pkceRequiredForEmailMagicLinks: !1 }), ot = function
             case "end": return e.stop();
         } }), e, this); }))); } }, this.authenticate = function (t) { return K(o, void 0, void 0, y().mark((function e() { var r, n, o; return y().wrap((function (e) { for (;;)
     switch (e.prev = e.next) {
-        case 0: return X("stytch.magicLinks.authenticate").isString("magic_links_token", t.magic_links_token).isNumber("session_duration_minutes", t.session_duration_minutes), n = Object.assign({ pkce_code_verifier: null === (r = this._pkceManager.getPKPair()) || void 0 === r ? void 0 : r.code_verifier }, t), e.next = 4, this._networkClient.fetchSDK({ url: "/b2b/magic_links/authenticate", body: n, errorMessage: "Failed to authenticate token.", method: "POST" });
-        case 4: return o = e.sent, this._pkceManager.clearPKPair(), this._subscriptionService.updateStateAndTokens({ state: { session: o.member_session, member: o.member }, session_token: o.session_token, session_jwt: o.session_jwt }), e.abrupt("return", o);
-        case 8:
+        case 0: return X("stytch.magicLinks.authenticate").isString("magic_links_token", t.magic_links_token).isNumber("session_duration_minutes", t.session_duration_minutes), e.next = 3, this._pkceManager.getPKPair();
+        case 3: return r = e.sent, n = Object.assign({ pkce_code_verifier: null == r ? void 0 : r.code_verifier }, t), e.next = 7, this._networkClient.fetchSDK({ url: "/b2b/magic_links/authenticate", body: n, errorMessage: "Failed to authenticate token.", method: "POST" });
+        case 7: return o = e.sent, this._pkceManager.clearPKPair(), this._subscriptionService.updateStateAndTokens({ state: { session: o.member_session, member: o.member }, session_token: o.session_token, session_jwt: o.session_jwt }), e.abrupt("return", o);
+        case 11:
         case "end": return e.stop();
     } }), e, this); }))); }; } return b(t, [{ key: "getCodeChallenge", value: function () { return K(this, void 0, void 0, y().mark((function t() { var e; return y().wrap((function (t) { for (;;)
             switch (t.prev = t.next) {
-                case 0:
-                    if (!(e = this._pkceManager.getPKPair())) {
-                        t.next = 3;
+                case 0: return t.next = 2, this._pkceManager.getPKPair();
+                case 2:
+                    if (!(e = t.sent)) {
+                        t.next = 5;
                         break;
                     }
                     return t.abrupt("return", e.code_challenge);
-                case 3: return t.next = 5, this._pkceManager.startPKCETransaction();
-                case 5: return e = t.sent, t.abrupt("return", e.code_challenge);
-                case 7:
+                case 5: return t.next = 7, this._pkceManager.startPKCETransaction();
+                case 7: return e = t.sent, t.abrupt("return", e.code_challenge);
+                case 9:
                 case "end": return t.stop();
             } }), t, this); }))); } }]), t; }(), it = b((function t(e, r) { var n = this; g(this, t), this._networkClient = e, this._subscriptionService = r, this.get = function () { return K(n, void 0, void 0, y().mark((function t() { var e; return y().wrap((function (t) { for (;;)
     switch (t.prev = t.next) {
@@ -745,9 +747,10 @@ var nt = Promise.resolve({ pkceRequiredForEmailMagicLinks: !1 }), ot = function
         case "end": return t.stop();
     } }), t, this); }))); }, this.getSync = function () { return n._subscriptionService.getMember(); }, this.onChange = function (t) { return n._subscriptionService.subscribeToState((function (e) { var r; return t(null !== (r = null == e ? void 0 : e.member) && void 0 !== r ? r : null); })); }; })), at = function () { function t(e, r, n, o, i) { g(this, t), this._networkClient = e, this._subscriptionService = r, this._pkceManager = n, this._dynamicConfig = o, this._config = i; } return b(t, [{ key: "authenticate", value: function (t) { return K(this, void 0, void 0, y().mark((function e() { var r, n; return y().wrap((function (e) { for (;;)
             switch (e.prev = e.next) {
-                case 0: return X("stytch.sso.authenticate").isString("sso_token", t.sso_token).isNumber("session_duration_minutes", t.session_duration_minutes), (r = this._pkceManager.getPKPair()) || J.warn("No code verifier found in local storage for SSO flow.\nConsider using stytch.oauth.$provider.start() to add PKCE to your OAuth flows for added security.\nSee https://stytch.com/docs/oauth#guides_pkce for more information."), e.next = 5, this._networkClient.fetchSDK({ url: "/sso/authenticate", method: "POST", body: Object.assign({ pkce_code_verifier: null == r ? void 0 : r.code_verifier }, t), errorMessage: "Failed to authenticate token" });
-                case 5: return n = e.sent, this._pkceManager.clearPKPair(), this._subscriptionService.updateStateAndTokens({ state: { session: n.member_session, member: n.member }, session_token: n.session_token, session_jwt: n.session_jwt }), e.abrupt("return", n);
-                case 9:
+                case 0: return X("stytch.sso.authenticate").isString("sso_token", t.sso_token).isNumber("session_duration_minutes", t.session_duration_minutes), e.next = 3, this._pkceManager.getPKPair();
+                case 3: return (r = e.sent) || J.warn("No code verifier found in local storage for SSO flow.\nConsider using stytch.oauth.$provider.start() to add PKCE to your OAuth flows for added security.\nSee https://stytch.com/docs/oauth#guides_pkce for more information."), e.next = 7, this._networkClient.fetchSDK({ url: "/sso/authenticate", method: "POST", body: Object.assign({ pkce_code_verifier: null == r ? void 0 : r.code_verifier }, t), errorMessage: "Failed to authenticate token" });
+                case 7: return n = e.sent, this._pkceManager.clearPKPair(), this._subscriptionService.updateStateAndTokens({ state: { session: n.member_session, member: n.member }, session_token: n.session_token, session_jwt: n.session_jwt }), e.abrupt("return", n);
+                case 11:
                 case "end": return e.stop();
             } }), e, this); }))); } }, { key: "getBaseApiUrl", value: function () { return K(this, void 0, void 0, y().mark((function t() { return y().wrap((function (t) { for (;;)
             switch (t.prev = t.next) {
@@ -814,7 +817,7 @@ catch (t) {
 catch (t) {
     i(t);
 } } function c(t) { var e; t.done ? o(t.value) : (e = t.value, e instanceof r ? e : new r((function (t) { t(e); }))).then(a, s); } c((n = n.apply(t, e || [])).next()); })); }
-var ht = function () { function t(e, r, n, o) { c(this, t), this._publicToken = e, this._subscriptionDataLayer = r, this.baseURL = n, this.additionalTelemetryDataFn = o, this.updateSessionToken = function () { return null; }, this.eventLogger = new rt({ maxBatchSize: tt, intervalDurationMs: et, logEventURL: this.buildSDKUrl("/events") }); } return l(t, [{ key: "logEvent", value: function (t) { var e = t.name, r = t.details, n = t.error, o = void 0 === n ? {} : n; this.eventLogger.logEvent(this.createTelemetryBlob(), { public_token: this._publicToken, event_name: e, details: r, error_code: o.error_code, error_description: o.error_description, http_status_code: o.http_status_code }); } }, { key: "createTelemetryBlob", value: function () { return Object.assign(Object.assign({ event_id: "event-id-".concat(V()), app_session_id: "app-session-id-".concat(V()), persistent_id: "persistent-id-".concat(V()), client_sent_at: (new Date).toISOString(), timezone: Intl.DateTimeFormat().resolvedOptions().timeZone }, this.additionalTelemetryDataFn()), { app: { identifier: window.location.hostname }, sdk: { identifier: "Stytch.js Javascript SDK", version: "0.10.0" } }); } }, { key: "fetchSDK", value: function (t) { var e = t.url, r = t.body, n = t.errorMessage, o = t.method; return ft(this, void 0, void 0, s().mark((function t() { var i, a, c, u; return s().wrap((function (t) { for (;;)
+var ht = function () { function t(e, r, n, o) { c(this, t), this._publicToken = e, this._subscriptionDataLayer = r, this.baseURL = n, this.additionalTelemetryDataFn = o, this.updateSessionToken = function () { return null; }, this.eventLogger = new rt({ maxBatchSize: tt, intervalDurationMs: et, logEventURL: this.buildSDKUrl("/events") }); } return l(t, [{ key: "logEvent", value: function (t) { var e = t.name, r = t.details, n = t.error, o = void 0 === n ? {} : n; this.eventLogger.logEvent(this.createTelemetryBlob(), { public_token: this._publicToken, event_name: e, details: r, error_code: o.error_code, error_description: o.error_description, http_status_code: o.http_status_code }); } }, { key: "createTelemetryBlob", value: function () { return Object.assign(Object.assign({ event_id: "event-id-".concat(V()), app_session_id: "app-session-id-".concat(V()), persistent_id: "persistent-id-".concat(V()), client_sent_at: (new Date).toISOString(), timezone: Intl.DateTimeFormat().resolvedOptions().timeZone }, this.additionalTelemetryDataFn()), { app: { identifier: window.location.hostname }, sdk: { identifier: "Stytch.js Javascript SDK", version: "0.10.2" } }); } }, { key: "fetchSDK", value: function (t) { var e = t.url, r = t.body, n = t.errorMessage, o = t.method; return ft(this, void 0, void 0, s().mark((function t() { var i, a, c, u; return s().wrap((function (t) { for (;;)
             switch (t.prev = t.next) {
                 case 0: return i = this._subscriptionDataLayer.readSessionCookie().session_token, a = "Basic " + window.btoa(this._publicToken + ":" + (i || this._publicToken)), c = window.btoa(JSON.stringify(this.createTelemetryBlob())), u = window.location.origin, t.abrupt("return", Z({ basicAuthHeader: a, body: r, errorMessage: n, finalURL: this.buildSDKUrl(e), method: o, xSDKClientHeader: c, xSDKParentHostHeader: u }));
                 case 5:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/nextjs",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Stytch's official Next.js Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -21,14 +21,14 @@
   "author": "Stytch",
   "devDependencies": {
     "@babel/runtime": "7.18.6",
-    "@stytch/vanilla-js": "0.10.0",
+    "@stytch/vanilla-js": "0.10.2",
     "@testing-library/react": "12.1.3",
     "eslint-config-custom": "0.0.0",
     "rollup": "2.56.3",
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "@stytch/vanilla-js": "^0.10.0",
+    "@stytch/vanilla-js": "^0.10.2",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   },