@descope/react-sdk 0.0.51 → 0.0.52-alpha.0

package/README.md

@@ -9,14 +9,29 @@ npm install @descope/react-sdk
 ```
 
 ### Render it in your application
+#### Wrap your app with Auth Provider
 ```js
-import Descope from '@descope/react-sdk'
+import { AuthProvider } from '@descope/react-sdk'
 
-const App = () => {
+const AppRoot = () => {
+    return (
+        <AuthProvider 
+            projectId="myProjectId" 
+        >
+         <App />
+        </AuthProvider>
+    )
+}
+```
+#### Use Descope to render specific flow
+
+```js
+import { Descope } from '@descope/react-sdk'
 
+const App = () => {
     return (
+        {...}
         <Descope 
-            projectId="myProjectId" 
             flowId="myFlowId" 
             onSuccess={(e) => console.log('Logged in!')}
             onError={(e) => console.log('Could not logged in!')}

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+import React, { DOMAttributes, FC } from 'react';
+import DescopeWc from '@descope/web-component';
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            ['descope-wc']: DescopeCustomElement;
+        }
+    }
+}
+declare type CustomEvents<K extends string> = {
+    [key in K]: (event: CustomEvent) => void;
+};
+declare type CustomElement<T, K extends string = ''> = Partial<T & DOMAttributes<T> & {
+    children: React.ReactChild;
+    ref: React.Ref<HTMLElement>;
+} & CustomEvents<`on${K}`>>;
+declare type DescopeCustomElement = CustomElement<DescopeWc, 'success' | 'error'>;
+declare enum UserStatus {
+    enabled = "enabled",
+    disabled = "disabled",
+    invited = "invited",
+    unknown = "unknown"
+}
+interface IExternalID {
+    id: string;
+    type?: string;
+}
+interface User {
+    externalIDs?: IExternalID[];
+    displayName?: string;
+    project?: string;
+    logoutTime?: number;
+    createTime?: number;
+    email?: string;
+    phoneNumber?: string;
+    status?: UserStatus;
+    verifiedEmail?: boolean;
+    verifiedPhone?: boolean;
+    tenants?: string[];
+}
+
+declare const useAuth: () => {
+    projectId: string;
+    baseUrl: string;
+    authenticated: boolean;
+    user: User;
+};
+
+interface PropsType {
+    flowId: string;
+    onSuccess?: DescopeCustomElement['onsuccess'];
+    onError?: DescopeCustomElement['onerror'];
+}
+declare const Descope: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<HTMLElement>>;
+
+interface IAuthProviderProps {
+    projectId: string;
+    baseUrl?: string;
+    children?: JSX.Element;
+}
+declare const AuthProvider: FC<IAuthProviderProps>;
+
+export { AuthProvider, Descope, useAuth };

package/dist/index.js

@@ -0,0 +1 @@
+import e,{useMemo as r,useRef as t,useImperativeHandle as o,useCallback as s,useEffect as n,useState as c}from"react";import"@descope/web-component";const d=e.createContext(void 0),u=()=>{const t=e.useContext(d);if(!t)throw Error("You can only use useAuth in the context of <AuthProvider />");const{authenticated:o,user:s,projectId:n,baseUrl:c}=t;return r((()=>({projectId:n,baseUrl:c,authenticated:o,user:s})),[n,c,o,s])},a=e.forwardRef((({flowId:r,onSuccess:c,onError:u},a)=>{const i=t();o(a,(()=>i.current));const{projectId:l,baseUrl:p,setAuthenticated:v,setUser:h}=e.useContext(d),f=s((e=>{h(e?.detail?.user),v(!0),c&&c(e)}),[h,v,c]);return n((()=>{const e=i.current;return e?.addEventListener("success",f),u&&e?.addEventListener("error",u),()=>{u&&e?.removeEventListener("error",u),e?.removeEventListener("success",f)}}),[i,u,f]),e.createElement("descope-wc",{"project-id":l,"flow-id":r,"base-url":p,ref:i})}));a.defaultProps={onError:void 0,onSuccess:void 0};const i=({projectId:t,baseUrl:o,children:s})=>{const[n,u]=c(!1),[a,i]=c({}),l=r((()=>({user:a,authenticated:n,projectId:t,baseUrl:o,setUser:i,setAuthenticated:u})),[n,a,t,o]);return e.createElement(d.Provider,{value:l},s)};i.defaultProps={baseUrl:"",children:void 0};export{i as AuthProvider,a as Descope,u as useAuth};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@descope/react-sdk",
-  "version": "0.0.51",
-  "main": "dist/Descope.js",
-  "types": "dist/Descope.d.ts",
+  "version": "0.0.52-alpha.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "description": "Descope React SDK",
   "license": "ISC",
   "repository": {
@@ -13,7 +13,7 @@
     "dist"
   ],
   "dependencies": {
-    "@descope/web-component": "^0.0.25"
+    "@descope/web-component": "^0.0.26-alpha.1"
   },
   "devDependencies": {
     "@babel/core": "7.18.9",
@@ -55,10 +55,13 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rollup": "^2.62.0",
+    "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-browsersync": "^1.3.3",
     "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-serve": "^1.1.0",
+    "rollup-plugin-terser": "^7.0.2",
     "ts-jest": "^27.0.7",
     "ts-node": "10.9.1",
     "typescript": "^4.5.3"
@@ -68,7 +71,7 @@
     "react": ">=16"
   },
   "scripts": {
-    "start": "rollup -c rollup.config.app.js -w",
+    "start": "npm run build && rollup -c rollup.config.app.js -w",
     "build": "rollup -c",
     "test": "jest",
     "lint": "eslint ./src",

package/dist/Descope.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import '@descope/web-component';
-import { DescopeCustomElement } from './types';
-interface PropsType {
-    projectId: string;
-    flowId: string;
-    baseUrl?: string;
-    onSuccess?: DescopeCustomElement['onsuccess'];
-    onError?: DescopeCustomElement['onerror'];
-}
-declare const Descope: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<HTMLElement>>;
-export default Descope;

package/dist/Descope.js

@@ -1,28 +0,0 @@
-import React, { useRef, useImperativeHandle, useEffect } from 'react';
-import '@descope/web-component';
-
-const Descope = React.forwardRef(({ projectId, flowId, baseUrl, onSuccess, onError }, ref) => {
-    const innerRef = useRef();
-    useImperativeHandle(ref, () => innerRef.current);
-    useEffect(() => {
-        const ele = innerRef.current;
-        if (onError)
-            ele?.addEventListener('error', onError);
-        if (onSuccess)
-            ele?.addEventListener('success', onSuccess);
-        return () => {
-            if (onError)
-                ele?.removeEventListener('error', onError);
-            if (onSuccess)
-                ele?.removeEventListener('success', onSuccess);
-        };
-    }, [innerRef, onError, onSuccess]);
-    return React.createElement("descope-wc", { "project-id": projectId, "flow-id": flowId, "base-url": baseUrl, ref: innerRef });
-});
-Descope.defaultProps = {
-    onError: undefined,
-    onSuccess: undefined,
-    baseUrl: undefined
-};
-
-export { Descope as default };

package/dist/types.d.ts

@@ -1,17 +0,0 @@
-import React, { DOMAttributes } from 'react';
-import DescopeWc from '@descope/web-component';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            ['descope-wc']: DescopeCustomElement;
-        }
-    }
-}
-export declare type CustomEvents<K extends string> = {
-    [key in K]: (event: CustomEvent) => void;
-};
-export declare type CustomElement<T, K extends string = ''> = Partial<T & DOMAttributes<T> & {
-    children: React.ReactChild;
-    ref: React.Ref<HTMLElement>;
-} & CustomEvents<`on${K}`>>;
-export declare type DescopeCustomElement = CustomElement<DescopeWc, 'success' | 'error'>;