@stytch/react 0.0.0-rc.1

package/LICENSE

@@ -0,0 +1,17 @@
+MIT License
+Copyright (c) 2021 stytchauth
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+# Stytch-React
+
+Stytch's React Library
+
+## Install
+
+With `npm`
+`npm install @stytch/react @stytch/vanilla-js --save`
+
+## Documentation
+
+For full documentation please refer to Stytch's javascript SDK documentation on https://stytch.com/docs/sdks.
+
+## Example Usage
+
+```javascript
+import { StytchProvider } from '@stytch/react';
+import { StytchUIClient } from '@stytch/vanilla-js';
+
+const stytch = new StytchUIClient('public-token-<find yours in the stytch dashboard>');
+
+// Wrap your App in the StytchProvider
+ReactDOM.render(
+  <StytchProvider stytch={stytch}>
+    <App />
+  </StytchProvider>,
+  document.getElementById('root'),
+);
+
+// Now use Stytch in your components
+const App = () => {
+  const stytchProps = {
+    loginOrSignupView: {
+      products: ['emailMagicLinks'],
+      emailMagicLinksOptions: {
+        loginRedirectURL: 'https://example.com/authenticate',
+        loginExpirationMinutes: 30,
+        signupRedirectURL: 'https://example.com/authenticate',
+        signupExpirationMinutes: 30,
+        createUserAsPending: true,
+      },
+    },
+    style: {
+      fontFamily: '"Helvetica New", Helvetica, sans-serif',
+      width: '321px',
+      primaryColor: '#0577CA',
+    },
+    callbacks: {
+      onEvent: (message) => console.log(message),
+      onSuccess: (message) => console.log(message),
+      onError: (message) => console.log(message),
+    },
+  };
+
+  return (
+    <div id="login">
+      <Stytch
+        publicToken={stytchProps.publicToken}
+        loginOrSignupView={stytchProps.loginOrSignupView}
+        style={stytchProps.style}
+        callbacks={stytchProps.callbacks}
+      />
+    </div>
+  );
+};
+```
+
+## Typescript Support
+
+There are built in typescript definitions in the npm package.

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { Config, StyleConfig, User, Session, StytchUIClient } from "@stytch/vanilla-js";
+import * as React from "react";
+import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+/**
+ * Stytch JS React Component
+ *
+ * [Documentation](https://stytch.com/docs/javascript-sdk)
+ */
+declare const Stytch: ({ config, styles }: {
+    config: Config;
+    styles: StyleConfig;
+}) => JSX.Element | null;
+type StytchClient = StytchUIClient | StytchHeadlessClient;
+declare const useStytchUser: () => User | null;
+declare const useStytchSession: () => Session | null;
+declare const useStytch: () => StytchClient;
+declare const withStytch: <T extends object>(Component: React.ComponentType<T & {
+    stytch: StytchClient;
+}>) => React.ComponentType<T>;
+declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
+    stytchUser: User | null;
+}>) => React.ComponentType<T>;
+declare const withStytchSession: <T extends object>(Component: React.ComponentType<T & {
+    stytchSession: Session | null;
+}>) => React.ComponentType<T>;
+type StytchProviderProps = {
+    stytch: StytchClient;
+    children?: React.ReactNode;
+};
+declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
+export { Stytch, useStytchUser, useStytchSession, useStytch, withStytch, withStytchUser, withStytchSession, StytchProviderProps, StytchProvider };

package/dist/index.esm.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { Config, StyleConfig, User, Session, StytchUIClient } from "@stytch/vanilla-js";
+import * as React from "react";
+import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+/**
+ * Stytch JS React Component
+ *
+ * [Documentation](https://stytch.com/docs/javascript-sdk)
+ */
+declare const Stytch: ({ config, styles }: {
+    config: Config;
+    styles: StyleConfig;
+}) => JSX.Element | null;
+type StytchClient = StytchUIClient | StytchHeadlessClient;
+declare const useStytchUser: () => User | null;
+declare const useStytchSession: () => Session | null;
+declare const useStytch: () => StytchClient;
+declare const withStytch: <T extends object>(Component: React.ComponentType<T & {
+    stytch: StytchClient;
+}>) => React.ComponentType<T>;
+declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
+    stytchUser: User | null;
+}>) => React.ComponentType<T>;
+declare const withStytchSession: <T extends object>(Component: React.ComponentType<T & {
+    stytchSession: Session | null;
+}>) => React.ComponentType<T>;
+type StytchProviderProps = {
+    stytch: StytchClient;
+    children?: React.ReactNode;
+};
+declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
+export { Stytch, useStytchUser, useStytchSession, useStytch, withStytch, withStytchUser, withStytchSession, StytchProviderProps, StytchProvider };

package/dist/index.esm.js

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { StytchUIClient } from '@stytch/vanilla-js';
+
+const StytchUserContext = React.createContext(null);
+const StytchSessionContext = React.createContext(null);
+const StytchContext = React.createContext({});
+const useStytchUser = () => {
+    return React.useContext(StytchUserContext);
+};
+const useStytchSession = () => {
+    return React.useContext(StytchSessionContext);
+};
+const useStytch = () => {
+    return React.useContext(StytchContext);
+};
+const withStytch = (Component) => {
+    const WithStytch = (props) => {
+        return React.createElement(Component, { ...props, stytch: useStytch() });
+    };
+    WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytch;
+};
+const withStytchUser = (Component) => {
+    const WithStytchUser = (props) => {
+        return React.createElement(Component, { ...props, stytchUser: useStytchUser() });
+    };
+    WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchUser;
+};
+const withStytchSession = (Component) => {
+    const WithStytchSession = (props) => {
+        return React.createElement(Component, { ...props, stytchSession: useStytchSession() });
+    };
+    WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchSession;
+};
+const StytchProvider = ({ stytch, children }) => {
+    const [user, setUser] = React.useState(null);
+    const [session, setSession] = React.useState(null);
+    React.useEffect(() => {
+        const unsubscribeUser = stytch.user.onChange((user) => setUser(user));
+        const unsubscribeSession = stytch.session.onChange((session) => setSession(session));
+        return () => {
+            unsubscribeUser();
+            unsubscribeSession();
+        };
+    }, [stytch, setUser, setSession]);
+    return (React.createElement(StytchContext.Provider, { value: stytch },
+        React.createElement(StytchUserContext.Provider, { value: session && user },
+            React.createElement(StytchSessionContext.Provider, { value: user && session }, children))));
+};
+
+/**
+ * Returns a unique element ID.
+ * Client-side only - will return null for server-side
+ * resolves: https://stytch.slack.com/archives/C015UDB4X33/p1641450131000800
+ * based on: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477
+ */
+const useUniqueElementId = () => {
+    const [elementId, setElementId] = React.useState(null);
+    React.useEffect(() => {
+        const randId = Math.floor(Math.random() * 1e6);
+        setElementId(`stytch-magic-link-${randId}`);
+    }, []);
+    return elementId;
+};
+/**
+ * Stytch JS React Component
+ *
+ * [Documentation](https://stytch.com/docs/javascript-sdk)
+ */
+const Stytch = ({ config, styles }) => {
+    const stytchClient = useStytch();
+    const elementId = useUniqueElementId();
+    React.useEffect(() => {
+        if (!stytchClient || !elementId) {
+            return;
+        }
+        if (!(stytchClient instanceof StytchUIClient)) {
+            throw Error(`Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.
+`);
+        }
+        stytchClient.mount({
+            config,
+            elementId: `#${elementId}`,
+            styles,
+        });
+    }, [elementId, stytchClient]);
+    return elementId ? React.createElement("div", { id: elementId }) : null;
+};
+
+export { Stytch, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };

package/dist/index.js

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var vanillaJs = require('@stytch/vanilla-js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const StytchUserContext = React__namespace.createContext(null);
+const StytchSessionContext = React__namespace.createContext(null);
+const StytchContext = React__namespace.createContext({});
+const useStytchUser = () => {
+    return React__namespace.useContext(StytchUserContext);
+};
+const useStytchSession = () => {
+    return React__namespace.useContext(StytchSessionContext);
+};
+const useStytch = () => {
+    return React__namespace.useContext(StytchContext);
+};
+const withStytch = (Component) => {
+    const WithStytch = (props) => {
+        return React__namespace.createElement(Component, { ...props, stytch: useStytch() });
+    };
+    WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytch;
+};
+const withStytchUser = (Component) => {
+    const WithStytchUser = (props) => {
+        return React__namespace.createElement(Component, { ...props, stytchUser: useStytchUser() });
+    };
+    WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchUser;
+};
+const withStytchSession = (Component) => {
+    const WithStytchSession = (props) => {
+        return React__namespace.createElement(Component, { ...props, stytchSession: useStytchSession() });
+    };
+    WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchSession;
+};
+const StytchProvider = ({ stytch, children }) => {
+    const [user, setUser] = React__namespace.useState(null);
+    const [session, setSession] = React__namespace.useState(null);
+    React__namespace.useEffect(() => {
+        const unsubscribeUser = stytch.user.onChange((user) => setUser(user));
+        const unsubscribeSession = stytch.session.onChange((session) => setSession(session));
+        return () => {
+            unsubscribeUser();
+            unsubscribeSession();
+        };
+    }, [stytch, setUser, setSession]);
+    return (React__namespace.createElement(StytchContext.Provider, { value: stytch },
+        React__namespace.createElement(StytchUserContext.Provider, { value: session && user },
+            React__namespace.createElement(StytchSessionContext.Provider, { value: user && session }, children))));
+};
+
+/**
+ * Returns a unique element ID.
+ * Client-side only - will return null for server-side
+ * resolves: https://stytch.slack.com/archives/C015UDB4X33/p1641450131000800
+ * based on: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477
+ */
+const useUniqueElementId = () => {
+    const [elementId, setElementId] = React__namespace.useState(null);
+    React__namespace.useEffect(() => {
+        const randId = Math.floor(Math.random() * 1e6);
+        setElementId(`stytch-magic-link-${randId}`);
+    }, []);
+    return elementId;
+};
+/**
+ * Stytch JS React Component
+ *
+ * [Documentation](https://stytch.com/docs/javascript-sdk)
+ */
+const Stytch = ({ config, styles }) => {
+    const stytchClient = useStytch();
+    const elementId = useUniqueElementId();
+    React__namespace.useEffect(() => {
+        if (!stytchClient || !elementId) {
+            return;
+        }
+        if (!(stytchClient instanceof vanillaJs.StytchUIClient)) {
+            throw Error(`Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.
+`);
+        }
+        stytchClient.mount({
+            config,
+            elementId: `#${elementId}`,
+            styles,
+        });
+    }, [elementId, stytchClient]);
+    return elementId ? React__namespace.createElement("div", { id: elementId }) : null;
+};
+
+exports.Stytch = Stytch;
+exports.StytchProvider = StytchProvider;
+exports.useStytch = useStytch;
+exports.useStytchSession = useStytchSession;
+exports.useStytchUser = useStytchUser;
+exports.withStytch = withStytch;
+exports.withStytchSession = withStytchSession;
+exports.withStytchUser = withStytchUser;

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@stytch/react",
+  "version": "0.0.0-rc.1",
+  "description": "Stytch's official React Library",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "npm run clean && npm run compile",
+    "clean": "rm -rf ./dist",
+    "compile": "rollup -c",
+    "dev": "tsc -p tsconfig.build.json --watch"
+  },
+  "license": "MIT",
+  "author": "Stytch",
+  "devDependencies": {
+    "@babel/runtime": "^7.18.6",
+    "@stytch/vanilla-js": "0.0.0-rc.1",
+    "eslint-config-custom": "0.0.0",
+    "rollup": "^2.56.3",
+    "typescript": "^4.5.3"
+  },
+  "peerDependencies": {
+    "@stytch/vanilla-js": "0.0.0-rc.1",
+    "react": ">= 17.0.2",
+    "react-dom": ">= 17.0.2"
+  },
+  "stableVersion": "0.0.0"
+}