@descope/react-sdk 0.0.52-alpha.3 → 0.0.52-alpha.5

package/README.md

@@ -24,6 +24,28 @@ const AppRoot = () => {
 }
 ```
 #### Use Descope to render specific flow
+You can use default flows or provide flow id directly to the Descope component
+
+##### Default flows
+
+```js
+// you can choose flow to run from the following
+// import { SignIn } from '@descope/react-sdk'
+// import { SignUp } from '@descope/react-sdk'
+import { SignUpOrIn } from '@descope/react-sdk'
+
+const App = () => {
+    return (
+        {...}
+        <SignUpOrIn 
+            onSuccess={(e) => console.log('Logged in!')}
+            onError={(e) => console.log('Could not logged in!')}
+        />
+    )
+}
+```
+
+##### Provide flow id
 
 ```js
 import { Descope } from '@descope/react-sdk'
@@ -35,10 +57,19 @@ const App = () => {
             flowId="myFlowId" 
             onSuccess={(e) => console.log('Logged in!')}
             onError={(e) => console.log('Could not logged in!')}
-        >
+        />
     )
 }
 ```
 
-TODO:
-- decide about the callbacks event data & structure
+## Contributing to this project
+In order to use this repo locally
+ - Clone this repository
+ - Navigate to repository directory
+ - Run `npm i`
+ - Edit `src/app/index.tsx` in the following way
+      - Set `projectId` prop - replace `<project-id>` with your project id
+      - Set `flowId` prop - Replace  `<flow-id>` (for example - `sign-up-or-in`)
+      - Optional - set a different `baseUrl` (for example - `http://localhost:8000`)    
+ - Run `npm run start`
+ - Go to `http://localhost:3000/` and start flow

package/dist/index.d.ts

@@ -1,6 +1,14 @@
-import React, { DOMAttributes, FC } from 'react';
+/// <reference types="react" />
+import React, { FC, DOMAttributes } from 'react';
 import DescopeWc from '@descope/web-component';
 
+interface IAuthProviderProps {
+    projectId: string;
+    baseUrl?: string;
+    children?: JSX.Element;
+}
+declare const AuthProvider: FC<IAuthProviderProps>;
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -39,6 +47,18 @@ interface User {
     verifiedPhone?: boolean;
     tenants?: string[];
 }
+interface DescopeProps {
+    flowId: string;
+    onSuccess?: DescopeCustomElement['onsuccess'];
+    onError?: DescopeCustomElement['onerror'];
+}
+declare type DefaultFlowProps = Omit<DescopeProps, 'flowId'>;
+
+declare const SignInFlow: (props: DefaultFlowProps) => JSX.Element;
+declare const SignUpFlow: (props: DefaultFlowProps) => JSX.Element;
+declare const SignUpOrInFlow: (props: DefaultFlowProps) => JSX.Element;
+
+declare const Descope: React.ForwardRefExoticComponent<DescopeProps & React.RefAttributes<HTMLElement>>;
 
 declare const useAuth: () => {
     projectId: string;
@@ -48,18 +68,4 @@ declare const useAuth: () => {
     sessionToken: string;
 };
 
-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 };
+export { AuthProvider, Descope, SignInFlow, SignUpFlow, SignUpOrInFlow, useAuth };

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/react-sdk",
-  "version": "0.0.52-alpha.3",
+  "version": "0.0.52-alpha.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "description": "Descope React SDK",
@@ -13,7 +13,7 @@
     "dist"
   ],
   "dependencies": {
-    "@descope/web-component": "^0.0.26-alpha.4"
+    "@descope/web-component": "^0.0.26-alpha.7"
   },
   "devDependencies": {
     "@babel/core": "7.18.9",