@descope/react-sdk 0.0.52-alpha.16 → 0.0.52-alpha.18

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Descope
+
+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

@@ -145,16 +145,31 @@ const App = () => {
 }
 ```
 
-## Contributing to this project
+## Run a local example
 
-In order to use this repo locally
+There is a simple app that uses Descope React SDK, with two routes
+
+- Home
+- Login
+
+In order to run this app locally, do the following steps:
 
 - 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`)
+- Create a `.env` file with the following variables (or alternatively export them manually):
+
+```env
+// .env
+# Your project id
+DESCOPE_PROJECT_ID=<project-id>
+# Flow id to run, e.g. sign-up-or-in
+DESCOPE_FLOW_ID=<flow-id>
+# Optional - Descope base url, e.g. http://localhost:8000
+DESCOPE_BASE_URL=<base-url>
+```
+
 - Run `npm run start`
-- Go to `http://localhost:3000/` and start flow
+- Go to `http://localhost:3000/` and press the "Start Flow" button
+
+Note: if you change env file (for example, change DESCOPE_PROJECT_ID), you need to rerun `npm run start`

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@descope/web-js-sdk"),t=require("react");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@descope/web-component");var o=s(e),r=s(t);const n=r.default.createContext(void 0),u=({projectId:e,baseUrl:s,children:u})=>{const[a,l]=t.useState({}),[c,d]=t.useState(""),i=t.useMemo((()=>{if(e)return o.default({projectId:e,baseUrl:s,hooks:{beforeRequest:e=>{const t=e;return t.headers={...t.headers,"x-descope-sdk-name":"react","x-descope-sdk-version":"0.0.52-alpha.18"},t}}})}),[e,s]);t.useEffect((()=>{if(!i)return;const e=i.onSessionTokenChange(d),t=i.onUserChange(l);return()=>{e?.(),t?.()}}),[i]);const f=t.useMemo((()=>({sdk:i,projectId:e,baseUrl:s,user:a,sessionToken:c,setUser:l,setSessionToken:d})),[c,a,e,s]);return r.default.createElement(n.Provider,{value:f},u)};u.defaultProps={baseUrl:"",children:void 0};const a=r.default.forwardRef((({flowId:e,onSuccess:s,onError:o,tenant:u},a)=>{const l=t.useRef();t.useImperativeHandle(a,(()=>l.current));const{projectId:c,baseUrl:d,setUser:i,setSessionToken:f}=r.default.useContext(n),p=t.useCallback((e=>{i(e.detail?.user);const t=e.detail?.sessionJwt;f(t),s&&s(e)}),[i,f,s]);return t.useEffect((()=>{const e=l.current;return e?.addEventListener("success",p),o&&e?.addEventListener("error",o),()=>{o&&e?.removeEventListener("error",o),e?.removeEventListener("success",p)}}),[l,o,p]),r.default.createElement("descope-wc",{"project-id":c,"flow-id":e,"base-url":d,ref:l,tenant:u})}));a.defaultProps={onError:void 0,onSuccess:void 0};const l=e=>(...t)=>{if(!e)throw Error("You can only use this function after sdk initialization. Make sure to supply 'projectId' to <AuthProvider /> component");return e(...t)};exports.AuthProvider=u,exports.Descope=a,exports.SignInFlow=e=>r.default.createElement(a,{...e,flowId:"sign-in"}),exports.SignUpFlow=e=>r.default.createElement(a,{...e,flowId:"sign-up"}),exports.SignUpOrInFlow=e=>r.default.createElement(a,{...e,flowId:"sign-up-or-in"}),exports.useAuth=()=>{const e=r.default.useContext(n);if(!e)throw Error("You can only use 'useAuth' in the context of <AuthProvider />");const{user:s,sessionToken:o,sdk:u}=e,a=t.useCallback(l(u?.logoutAll),[u]),c=t.useCallback(l(u?.logout),[u]),d=t.useCallback(l(u?.me),[u]),i=t.useCallback(l(u?.getJwtPermissions),[u]),f=t.useCallback(l(u?.getJwtRoles),[u]);return t.useMemo((()=>({authenticated:!!o,user:s,sessionToken:o,logoutAll:a,logout:c,me:d,getJwtPermissions:i,getJwtRoles:f})),[s,o,u])};
+//# sourceMappingURL=index.cjs.js.map

package/dist/cjs/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../src/lib/hooks/authContext.ts","../../src/lib/components/AuthProvider.tsx","../../src/lib/components/Descope.tsx","../../src/lib/hooks/useAuth.ts","../../src/lib/components/DefaultFlows.tsx"],"sourcesContent":["import React from 'react';\nimport { IAuthContext } from '../types';\n\nconst AuthContext = React.createContext<IAuthContext>(undefined);\n\nexport default AuthContext;\n","// '@descope/web-js-sdk' is a dependency of '@descope/web-component'\n// and we want to use the same version that is used there\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport createSdk from '@descope/web-js-sdk';\nimport React, { FC, useEffect, useMemo, useState } from 'react';\nimport AuthContext from '../hooks/authContext';\nimport { IAuthContext } from '../types';\n\ndeclare const BUILD_VERSION: string;\n\ninterface IAuthProviderProps {\n\tprojectId: string;\n\tbaseUrl?: string;\n\tchildren?: JSX.Element;\n}\n\nconst AuthProvider: FC<IAuthProviderProps> = ({\n\tprojectId,\n\tbaseUrl,\n\tchildren\n}) => {\n\tconst [user, setUser] = useState({});\n\tconst [sessionToken, setSessionToken] = useState('');\n\n\tconst sdk = useMemo(() => {\n\t\tif (!projectId) {\n\t\t\treturn undefined;\n\t\t}\n\t\treturn createSdk({\n\t\t\tprojectId,\n\t\t\tbaseUrl,\n\t\t\thooks: {\n\t\t\t\tbeforeRequest: (config) => {\n\t\t\t\t\tconst conf = config;\n\t\t\t\t\tconf.headers = {\n\t\t\t\t\t\t...conf.headers,\n\t\t\t\t\t\t'x-descope-sdk-name': 'react',\n\t\t\t\t\t\t'x-descope-sdk-version': BUILD_VERSION\n\t\t\t\t\t};\n\t\t\t\t\treturn conf;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}, [projectId, baseUrl]);\n\n\tuseEffect(() => {\n\t\tif (!sdk) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst unsubscribeSessionToken = sdk.onSessionTokenChange(setSessionToken);\n\t\tconst unsubscribeUser = sdk.onUserChange(setUser);\n\t\treturn () => {\n\t\t\tunsubscribeSessionToken?.();\n\t\t\tunsubscribeUser?.();\n\t\t};\n\t}, [sdk]);\n\n\tconst value = useMemo<IAuthContext>(\n\t\t() => ({\n\t\t\tsdk,\n\t\t\tprojectId,\n\t\t\tbaseUrl,\n\t\t\tuser,\n\t\t\tsessionToken,\n\t\t\tsetUser,\n\t\t\tsetSessionToken\n\t\t}),\n\t\t[sessionToken, user, projectId, baseUrl]\n\t);\n\treturn <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;\n};\n\nAuthProvider.defaultProps = {\n\tbaseUrl: '',\n\tchildren: undefined\n};\n\nexport default AuthProvider;\n","import '@descope/web-component';\nimport React, {\n\tuseCallback,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef\n} from 'react';\nimport AuthContext from '../hooks/authContext';\nimport { DescopeProps } from '../types';\n\nconst Descope = React.forwardRef<HTMLElement, DescopeProps>(\n\t({ flowId, onSuccess, onError, tenant }, ref) => {\n\t\tconst innerRef = useRef<HTMLInputElement>();\n\n\t\tuseImperativeHandle(ref, () => innerRef.current);\n\n\t\tconst { projectId, baseUrl, setUser, setSessionToken } =\n\t\t\tReact.useContext(AuthContext);\n\n\t\tconst handleSuccess = useCallback(\n\t\t\t(e: CustomEvent) => {\n\t\t\t\tsetUser(e.detail?.user);\n\t\t\t\tconst sessionJwt = e.detail?.sessionJwt;\n\t\t\t\tsetSessionToken(sessionJwt);\n\t\t\t\tif (onSuccess) {\n\t\t\t\t\tonSuccess(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[setUser, setSessionToken, onSuccess]\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tconst ele = innerRef.current;\n\t\t\tele?.addEventListener('success', handleSuccess);\n\t\t\tif (onError) ele?.addEventListener('error', onError);\n\n\t\t\treturn () => {\n\t\t\t\tif (onError) ele?.removeEventListener('error', onError);\n\n\t\t\t\tele?.removeEventListener('success', handleSuccess);\n\t\t\t};\n\t\t}, [innerRef, onError, handleSuccess]);\n\n\t\treturn (\n\t\t\t<descope-wc\n\t\t\t\tproject-id={projectId}\n\t\t\t\tflow-id={flowId}\n\t\t\t\tbase-url={baseUrl}\n\t\t\t\tref={innerRef}\n\t\t\t\ttenant={tenant}\n\t\t\t/>\n\t\t);\n\t}\n);\n\nDescope.defaultProps = {\n\tonError: undefined,\n\tonSuccess: undefined\n};\n\nexport default Descope;\n","import React, { useCallback, useMemo } from 'react';\nimport { IAuth } from '../types';\nimport AuthContext from './authContext';\n\n/**\n * Wrap a function with a validation that it exists\n * @param fn The function to wrap with the validation\n * @throws if function does not exist, an error with the relevant message will be thrown\n */\nconst withValidation =\n\t<T extends Array<any>, U>(fn: (...args: T) => U) =>\n\t(...args: T): U => {\n\t\tif (!fn) {\n\t\t\tthrow Error(\n\t\t\t\t`You can only use this function after sdk initialization. Make sure to supply 'projectId' to <AuthProvider /> component`\n\t\t\t);\n\t\t}\n\t\treturn fn(...args);\n\t};\n\nconst useAuth = (): IAuth => {\n\tconst ctx = React.useContext(AuthContext);\n\tif (!ctx) {\n\t\tthrow Error(\n\t\t\t`You can only use 'useAuth' in the context of <AuthProvider />`\n\t\t);\n\t}\n\tconst { user, sessionToken, sdk } = ctx;\n\n\tconst logoutAll = useCallback(withValidation(sdk?.logoutAll), [sdk]);\n\n\tconst logout = useCallback(withValidation(sdk?.logout), [sdk]);\n\n\tconst me = useCallback(withValidation(sdk?.me), [sdk]);\n\n\tconst getJwtPermissions = useCallback(\n\t\twithValidation(sdk?.getJwtPermissions),\n\t\t[sdk]\n\t);\n\n\tconst getJwtRoles = useCallback(withValidation(sdk?.getJwtRoles), [sdk]);\n\n\treturn useMemo(\n\t\t() => ({\n\t\t\tauthenticated: !!sessionToken,\n\t\t\tuser,\n\t\t\tsessionToken,\n\t\t\tlogoutAll,\n\t\t\tlogout,\n\t\t\tme,\n\t\t\tgetJwtPermissions,\n\t\t\tgetJwtRoles\n\t\t}),\n\t\t[user, sessionToken, sdk]\n\t);\n};\n\nexport default useAuth;\n","import React from 'react';\nimport { DefaultFlowProps } from '../types';\nimport Descope from './Descope';\n\nexport const SignInFlow = (props: DefaultFlowProps) => (\n\t<Descope {...props} flowId=\"sign-in\" />\n);\n\nexport const SignUpFlow = (props: DefaultFlowProps) => (\n\t<Descope {...props} flowId=\"sign-up\" />\n);\n\nexport const SignUpOrInFlow = (props: DefaultFlowProps) => (\n\t<Descope {...props} flowId=\"sign-up-or-in\" />\n);\n"],"names":["AuthContext","React","createContext","undefined","AuthProvider","projectId","baseUrl","children","user","setUser","useState","sessionToken","setSessionToken","sdk","useMemo","createSdk","hooks","beforeRequest","config","conf","headers","useEffect","unsubscribeSessionToken","onSessionTokenChange","unsubscribeUser","onUserChange","value","createElement","Provider","defaultProps","Descope","forwardRef","flowId","onSuccess","onError","tenant","ref","innerRef","useRef","useImperativeHandle","current","useContext","handleSuccess","useCallback","e","detail","sessionJwt","ele","addEventListener","removeEventListener","withValidation","fn","args","Error","props","ctx","logoutAll","logout","me","getJwtPermissions","getJwtRoles","authenticated"],"mappings":"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"}

package/dist/cjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/dist/{index.js → index.esm.js}

@@ -1 +1,2 @@
-import e from"@descope/web-js-sdk";import o,{useState as t,useMemo as r,useEffect as s,useRef as n,useImperativeHandle as c,useCallback as i}from"react";import"@descope/web-component";const u=o.createContext(void 0),d=({projectId:n,baseUrl:c,children:i})=>{const[d,a]=t({}),[l,p]=t(""),f=r((()=>{if(n)return e({projectId:n,baseUrl:c,hooks:{beforeRequest:e=>{const o=e;return o.headers={...o.headers,"x-descope-sdk-name":"react","x-descope-sdk-version":"0.0.52-alpha.16"},o}}})}),[n,c]);s((()=>{if(!f)return;const e=f.onSessionTokenChange(p),o=f.onUserChange(a);return()=>{e?.(),o?.()}}),[f]);const m=r((()=>({sdk:f,projectId:n,baseUrl:c,user:d,sessionToken:l,setUser:a,setSessionToken:p})),[l,d,n,c]);return o.createElement(u.Provider,{value:m},i)};d.defaultProps={baseUrl:"",children:void 0};const a=o.forwardRef((({flowId:e,onSuccess:t,onError:r,tenant:d},a)=>{const l=n();c(a,(()=>l.current));const{projectId:p,baseUrl:f,setUser:m,setSessionToken:h}=o.useContext(u),w=i((e=>{m(e.detail?.user);const o=e.detail?.sessionJwt;h(o),t&&t(e)}),[m,h,t]);return s((()=>{const e=l.current;return e?.addEventListener("success",w),r&&e?.addEventListener("error",r),()=>{r&&e?.removeEventListener("error",r),e?.removeEventListener("success",w)}}),[l,r,w]),o.createElement("descope-wc",{"project-id":p,"flow-id":e,"base-url":f,ref:l,tenant:d})}));a.defaultProps={onError:void 0,onSuccess:void 0};const l=e=>o.createElement(a,{...e,flowId:"sign-in"}),p=e=>o.createElement(a,{...e,flowId:"sign-up"}),f=e=>o.createElement(a,{...e,flowId:"sign-up-or-in"}),m=e=>(...o)=>{if(!e)throw Error("You can only use this function after sdk initialization. Make sure to supply 'projectId' to <AuthProvider /> component");return e(...o)},h=()=>{const e=o.useContext(u);if(!e)throw Error("You can only use 'useAuth' in the context of <AuthProvider />");const{user:t,sessionToken:s,sdk:n}=e,c=i(m(n?.logoutAll),[n]),d=i(m(n?.logout),[n]),a=i(m(n?.me),[n]),l=i(m(n?.getJwtPermissions),[n]),p=i(m(n?.getJwtRoles),[n]);return r((()=>({authenticated:!!s,user:t,sessionToken:s,logoutAll:c,logout:d,me:a,getJwtPermissions:l,getJwtRoles:p})),[t,s,n])};export{d as AuthProvider,a as Descope,l as SignInFlow,p as SignUpFlow,f as SignUpOrInFlow,h as useAuth};
+import e from"@descope/web-js-sdk";import o,{useState as t,useMemo as r,useEffect as s,useRef as n,useImperativeHandle as c,useCallback as i}from"react";import"@descope/web-component";const u=o.createContext(void 0),d=({projectId:n,baseUrl:c,children:i})=>{const[d,a]=t({}),[l,p]=t(""),f=r((()=>{if(n)return e({projectId:n,baseUrl:c,hooks:{beforeRequest:e=>{const o=e;return o.headers={...o.headers,"x-descope-sdk-name":"react","x-descope-sdk-version":"0.0.52-alpha.18"},o}}})}),[n,c]);s((()=>{if(!f)return;const e=f.onSessionTokenChange(p),o=f.onUserChange(a);return()=>{e?.(),o?.()}}),[f]);const m=r((()=>({sdk:f,projectId:n,baseUrl:c,user:d,sessionToken:l,setUser:a,setSessionToken:p})),[l,d,n,c]);return o.createElement(u.Provider,{value:m},i)};d.defaultProps={baseUrl:"",children:void 0};const a=o.forwardRef((({flowId:e,onSuccess:t,onError:r,tenant:d},a)=>{const l=n();c(a,(()=>l.current));const{projectId:p,baseUrl:f,setUser:m,setSessionToken:h}=o.useContext(u),w=i((e=>{m(e.detail?.user);const o=e.detail?.sessionJwt;h(o),t&&t(e)}),[m,h,t]);return s((()=>{const e=l.current;return e?.addEventListener("success",w),r&&e?.addEventListener("error",r),()=>{r&&e?.removeEventListener("error",r),e?.removeEventListener("success",w)}}),[l,r,w]),o.createElement("descope-wc",{"project-id":p,"flow-id":e,"base-url":f,ref:l,tenant:d})}));a.defaultProps={onError:void 0,onSuccess:void 0};const l=e=>o.createElement(a,{...e,flowId:"sign-in"}),p=e=>o.createElement(a,{...e,flowId:"sign-up"}),f=e=>o.createElement(a,{...e,flowId:"sign-up-or-in"}),m=e=>(...o)=>{if(!e)throw Error("You can only use this function after sdk initialization. Make sure to supply 'projectId' to <AuthProvider /> component");return e(...o)},h=()=>{const e=o.useContext(u);if(!e)throw Error("You can only use 'useAuth' in the context of <AuthProvider />");const{user:t,sessionToken:s,sdk:n}=e,c=i(m(n?.logoutAll),[n]),d=i(m(n?.logout),[n]),a=i(m(n?.me),[n]),l=i(m(n?.getJwtPermissions),[n]),p=i(m(n?.getJwtRoles),[n]);return r((()=>({authenticated:!!s,user:t,sessionToken:s,logoutAll:c,logout:d,me:a,getJwtPermissions:l,getJwtRoles:p})),[t,s,n])};export{d as AuthProvider,a as Descope,l as SignInFlow,p as SignUpFlow,f as SignUpOrInFlow,h as useAuth};
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/lib/hooks/authContext.ts","../src/lib/components/AuthProvider.tsx","../src/lib/components/Descope.tsx","../src/lib/components/DefaultFlows.tsx","../src/lib/hooks/useAuth.ts"],"sourcesContent":["import React from 'react';\nimport { IAuthContext } from '../types';\n\nconst AuthContext = React.createContext<IAuthContext>(undefined);\n\nexport default AuthContext;\n","// '@descope/web-js-sdk' is a dependency of '@descope/web-component'\n// and we want to use the same version that is used there\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport createSdk from '@descope/web-js-sdk';\nimport React, { FC, useEffect, useMemo, useState } from 'react';\nimport AuthContext from '../hooks/authContext';\nimport { IAuthContext } from '../types';\n\ndeclare const BUILD_VERSION: string;\n\ninterface IAuthProviderProps {\n\tprojectId: string;\n\tbaseUrl?: string;\n\tchildren?: JSX.Element;\n}\n\nconst AuthProvider: FC<IAuthProviderProps> = ({\n\tprojectId,\n\tbaseUrl,\n\tchildren\n}) => {\n\tconst [user, setUser] = useState({});\n\tconst [sessionToken, setSessionToken] = useState('');\n\n\tconst sdk = useMemo(() => {\n\t\tif (!projectId) {\n\t\t\treturn undefined;\n\t\t}\n\t\treturn createSdk({\n\t\t\tprojectId,\n\t\t\tbaseUrl,\n\t\t\thooks: {\n\t\t\t\tbeforeRequest: (config) => {\n\t\t\t\t\tconst conf = config;\n\t\t\t\t\tconf.headers = {\n\t\t\t\t\t\t...conf.headers,\n\t\t\t\t\t\t'x-descope-sdk-name': 'react',\n\t\t\t\t\t\t'x-descope-sdk-version': BUILD_VERSION\n\t\t\t\t\t};\n\t\t\t\t\treturn conf;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}, [projectId, baseUrl]);\n\n\tuseEffect(() => {\n\t\tif (!sdk) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst unsubscribeSessionToken = sdk.onSessionTokenChange(setSessionToken);\n\t\tconst unsubscribeUser = sdk.onUserChange(setUser);\n\t\treturn () => {\n\t\t\tunsubscribeSessionToken?.();\n\t\t\tunsubscribeUser?.();\n\t\t};\n\t}, [sdk]);\n\n\tconst value = useMemo<IAuthContext>(\n\t\t() => ({\n\t\t\tsdk,\n\t\t\tprojectId,\n\t\t\tbaseUrl,\n\t\t\tuser,\n\t\t\tsessionToken,\n\t\t\tsetUser,\n\t\t\tsetSessionToken\n\t\t}),\n\t\t[sessionToken, user, projectId, baseUrl]\n\t);\n\treturn <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;\n};\n\nAuthProvider.defaultProps = {\n\tbaseUrl: '',\n\tchildren: undefined\n};\n\nexport default AuthProvider;\n","import '@descope/web-component';\nimport React, {\n\tuseCallback,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef\n} from 'react';\nimport AuthContext from '../hooks/authContext';\nimport { DescopeProps } from '../types';\n\nconst Descope = React.forwardRef<HTMLElement, DescopeProps>(\n\t({ flowId, onSuccess, onError, tenant }, ref) => {\n\t\tconst innerRef = useRef<HTMLInputElement>();\n\n\t\tuseImperativeHandle(ref, () => innerRef.current);\n\n\t\tconst { projectId, baseUrl, setUser, setSessionToken } =\n\t\t\tReact.useContext(AuthContext);\n\n\t\tconst handleSuccess = useCallback(\n\t\t\t(e: CustomEvent) => {\n\t\t\t\tsetUser(e.detail?.user);\n\t\t\t\tconst sessionJwt = e.detail?.sessionJwt;\n\t\t\t\tsetSessionToken(sessionJwt);\n\t\t\t\tif (onSuccess) {\n\t\t\t\t\tonSuccess(e);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[setUser, setSessionToken, onSuccess]\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tconst ele = innerRef.current;\n\t\t\tele?.addEventListener('success', handleSuccess);\n\t\t\tif (onError) ele?.addEventListener('error', onError);\n\n\t\t\treturn () => {\n\t\t\t\tif (onError) ele?.removeEventListener('error', onError);\n\n\t\t\t\tele?.removeEventListener('success', handleSuccess);\n\t\t\t};\n\t\t}, [innerRef, onError, handleSuccess]);\n\n\t\treturn (\n\t\t\t<descope-wc\n\t\t\t\tproject-id={projectId}\n\t\t\t\tflow-id={flowId}\n\t\t\t\tbase-url={baseUrl}\n\t\t\t\tref={innerRef}\n\t\t\t\ttenant={tenant}\n\t\t\t/>\n\t\t);\n\t}\n);\n\nDescope.defaultProps = {\n\tonError: undefined,\n\tonSuccess: undefined\n};\n\nexport default Descope;\n","import React from 'react';\nimport { DefaultFlowProps } from '../types';\nimport Descope from './Descope';\n\nexport const SignInFlow = (props: DefaultFlowProps) => (\n\t<Descope {...props} flowId=\"sign-in\" />\n);\n\nexport const SignUpFlow = (props: DefaultFlowProps) => (\n\t<Descope {...props} flowId=\"sign-up\" />\n);\n\nexport const SignUpOrInFlow = (props: DefaultFlowProps) => (\n\t<Descope {...props} flowId=\"sign-up-or-in\" />\n);\n","import React, { useCallback, useMemo } from 'react';\nimport { IAuth } from '../types';\nimport AuthContext from './authContext';\n\n/**\n * Wrap a function with a validation that it exists\n * @param fn The function to wrap with the validation\n * @throws if function does not exist, an error with the relevant message will be thrown\n */\nconst withValidation =\n\t<T extends Array<any>, U>(fn: (...args: T) => U) =>\n\t(...args: T): U => {\n\t\tif (!fn) {\n\t\t\tthrow Error(\n\t\t\t\t`You can only use this function after sdk initialization. Make sure to supply 'projectId' to <AuthProvider /> component`\n\t\t\t);\n\t\t}\n\t\treturn fn(...args);\n\t};\n\nconst useAuth = (): IAuth => {\n\tconst ctx = React.useContext(AuthContext);\n\tif (!ctx) {\n\t\tthrow Error(\n\t\t\t`You can only use 'useAuth' in the context of <AuthProvider />`\n\t\t);\n\t}\n\tconst { user, sessionToken, sdk } = ctx;\n\n\tconst logoutAll = useCallback(withValidation(sdk?.logoutAll), [sdk]);\n\n\tconst logout = useCallback(withValidation(sdk?.logout), [sdk]);\n\n\tconst me = useCallback(withValidation(sdk?.me), [sdk]);\n\n\tconst getJwtPermissions = useCallback(\n\t\twithValidation(sdk?.getJwtPermissions),\n\t\t[sdk]\n\t);\n\n\tconst getJwtRoles = useCallback(withValidation(sdk?.getJwtRoles), [sdk]);\n\n\treturn useMemo(\n\t\t() => ({\n\t\t\tauthenticated: !!sessionToken,\n\t\t\tuser,\n\t\t\tsessionToken,\n\t\t\tlogoutAll,\n\t\t\tlogout,\n\t\t\tme,\n\t\t\tgetJwtPermissions,\n\t\t\tgetJwtRoles\n\t\t}),\n\t\t[user, sessionToken, sdk]\n\t);\n};\n\nexport default useAuth;\n"],"names":["AuthContext","React","createContext","undefined","AuthProvider","projectId","baseUrl","children","user","setUser","useState","sessionToken","setSessionToken","sdk","useMemo","createSdk","hooks","beforeRequest","config","conf","headers","useEffect","unsubscribeSessionToken","onSessionTokenChange","unsubscribeUser","onUserChange","value","createElement","Provider","defaultProps","Descope","forwardRef","flowId","onSuccess","onError","tenant","ref","innerRef","useRef","useImperativeHandle","current","useContext","handleSuccess","useCallback","e","detail","sessionJwt","ele","addEventListener","removeEventListener","SignInFlow","props","SignUpFlow","SignUpOrInFlow","withValidation","fn","args","Error","useAuth","ctx","logoutAll","logout","me","getJwtPermissions","getJwtRoles","authenticated"],"mappings":"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"}

package/package.json

@@ -1,8 +1,14 @@
 {
 	"name": "@descope/react-sdk",
-	"version": "0.0.52-alpha.16",
-	"main": "dist/index.js",
+	"version": "0.0.52-alpha.18",
+	"main": "dist/cjs/index.cjs.js",
+	"module": "dist/index.esm.js",
 	"types": "dist/index.d.ts",
+	"exports": {
+		"require": "./dist/cjs/index.cjs.js",
+		"import": "./dist/index.esm.js"
+	},
+	"type": "module",
 	"description": "Descope React SDK",
 	"license": "ISC",
 	"repository": {
@@ -13,7 +19,8 @@
 		"dist"
 	],
 	"dependencies": {
-		"@descope/web-component": "0.1.0-alpha.11"
+		"@descope/web-component": "0.1.0-alpha.12",
+		"react-router-dom": "6.4.3"
 	},
 	"devDependencies": {
 		"@babel/core": "7.20.2",
@@ -21,8 +28,8 @@
 		"@babel/preset-react": "7.18.6",
 		"@babel/preset-typescript": "7.18.6",
 		"@open-wc/rollup-plugin-html": "^1.2.5",
-		"@rollup/plugin-commonjs": "^21.0.1",
-		"@rollup/plugin-node-resolve": "^13.1.1",
+		"@rollup/plugin-commonjs": "^21.1.0",
+		"@rollup/plugin-node-resolve": "^13.3.0",
 		"@rollup/plugin-replace": "^3.0.0",
 		"@rollup/plugin-typescript": "^8.3.0",
 		"@testing-library/jest-dom": "5.16.5",
@@ -30,7 +37,8 @@
 		"@testing-library/user-event": "14.4.3",
 		"@types/jest": "^27.0.2",
 		"@types/react": "18.0.25",
-		"@types/react-dom": "18.0.8",
+		"@types/react-dom": "18.0.9",
+		"@types/react-router-dom": "^5.3.3",
 		"babel-jest": "27.5.1",
 		"eslint": "8.26.0",
 		"eslint-config-airbnb": "19.0.4",
@@ -40,10 +48,10 @@
 		"eslint-import-resolver-typescript": "2.7.1",
 		"eslint-plugin-import": "2.26.0",
 		"eslint-plugin-jest": "26.9.0",
-		"eslint-plugin-jest-dom": "4.0.2",
+		"eslint-plugin-jest-dom": "4.0.3",
 		"eslint-plugin-jest-formatting": "3.1.0",
 		"eslint-plugin-jsx-a11y": "6.6.1",
-		"eslint-plugin-n": "15.3.0",
+		"eslint-plugin-n": "15.5.1",
 		"eslint-plugin-no-only-tests": "2.6.0",
 		"eslint-plugin-prefer-arrow": "1.2.3",
 		"eslint-plugin-prettier": "4.2.1",
@@ -62,6 +70,7 @@
 		"rollup-plugin-browsersync": "^1.3.3",
 		"rollup-plugin-define": "^1.0.1",
 		"rollup-plugin-delete": "^2.0.0",
+		"rollup-plugin-dotenv": "^0.4.1",
 		"rollup-plugin-dts": "^4.2.2",
 		"rollup-plugin-livereload": "^2.0.5",
 		"rollup-plugin-serve": "^1.1.0",