@privy-io/react-auth 1.4.0-beta.2 → 1.4.0-beta.3

package/README.md

@@ -1,5 +1,9 @@
 # @privy-io/react-auth
 
+The Privy React Auth SDK allows you to authenticate your users with Privy in your React app. 
+
+Check out our [demo](https://demo.privy.io/)!
+
 > **⚠️ _NOTE:_** Privy is in beta. APIs and feature sets will change. We use [Semantic Versioning](https://semver.org/) to track breaking changes.
 
 ## Installing
@@ -8,6 +12,24 @@
 npm i @privy-io/react-auth
 ```
 
-## Contributing
+## Basic Usage
 
-Looking to make changes? Check out [CONTRIBUTING.md](CONTRIBUTING.md).
+Setup your integration by wrapping any React components that will use the Privy SDK with the `PrivyProvider`. This gives your wrapped components access to the Privy SDK and authentication context.
+```tsx
+// Import the PrivyProvider
+import { PrivyProvider } from '@privy-io/react-auth'
+
+// Wrap any components that will use the Privy SDK with the PrivyProvider – for example, in your `app` or `index` file
+<PrivyProvider appId="APP_ID_FROM_CONSOLE" onSuccess={(user) => console.log(`User ${user.id} logged in!`)}>
+  <Component {...pageProps} />
+</PrivyProvider>
+```
+
+Now, from within your React components, you can access the Privy SDK via the `usePrivy` hook!
+```tsx
+// Import the usePrivy hook
+import { usePrivy } from '@privy-io/react-auth'
+
+// Call usePrivy() from inside your React components
+const { ready, authenticated, user, login, logout } = usePrivy();
+```

package/dist/index.js

@@ -9,7 +9,7 @@ Chain ID: ${e}
 Nonce: ${d}
 Issued At: ${C}
 Resources:
-- https://privy.io`;this.ethProvider=new b1}initialize(){let e=q.get(g2);i4.includes(e)&&(this.walletType=e,this.connect({showPrompt:!1}))}destroy(){this.walletType=null,q.del(g2)}async connect(e){var a,i;switch(this.walletType){case"metamask":this.ethProvider.setProvider(window.ethereum),(a=window.ethereum.providers)==null||a.forEach(async C=>{C.isMetaMask&&this.ethProvider.setProvider(C)});break;case"coinbase_wallet":this.ethProvider.setProvider(window.ethereum),(i=window.ethereum.providers)==null||i.forEach(async C=>{C.isCoinbaseWallet&&this.ethProvider.setProvider(C)});break;case"wallet_connect":let o=new Z2.default({infuraId:d2});this.ethProvider.setProvider(o);break;default:throw new G(`Unsupported wallet: ${this.walletType}`)}return!await this.isConnected()&&e.showPrompt&&await this.promptConnection(this.walletType),this.address()}async isConnected(){switch(this.walletType){case"metamask":return await this.address()!==null;case"coinbase_wallet":return await this.address()!==null;case"wallet_connect":return this.ethProvider.connected;default:throw new G(`Unsupported wallet: ${this.walletType}`)}}async promptConnection(e){try{switch(e){case"metamask":await Promise.race([this.ethProvider.request({method:"eth_requestAccounts"}),G1()]);break;case"coinbase_wallet":await Promise.race([this.ethProvider.request({method:"eth_requestAccounts"}),G1()]);break;case"wallet_connect":let a=new Z2.default({infuraId:d2});this.ethProvider.setProvider(a),await Promise.race([a.enable(),G1()]),q.put(g2,e);break;default:throw new G(`Unsupported wallet: ${this.walletType}`)}}catch(a){throw k2(a)}}async sign(e){let i=new C4.providers.Web3Provider(new k1(this.getEthereumProvider())).getSigner();return Promise.race([i.signMessage(e),G1()]).catch(o=>{throw k2(o)})}prepareMessage(e,a,i){let o=window.location.host,C=window.location.origin,d=`${o} requests that you authenticate with Privy.`,p=new Date().toISOString();return this.createSiweMessage(e,a,o,C,p,i,d)}async chainId(){let e=await this.getEthereumProvider().request({method:"eth_chainId"}),a=Number(e);return String(a)}async address(){let e=await this.getEthereumProvider().request({method:"eth_accounts"});return Array.isArray(e)&&e.length>0?(0,r4.getAddress)(e[0]):null}};var w2,j1=class{constructor(e){let a=e.apiURL||j2,i=e.timeout||$2;this.appId=e.appId,this.connector=new B1,this.connector.initialize(),w2||(w2=new F1),this.session=w2,this.api=new U1(e.appId,this.session,{baseURL:a,timeout:i}),this.session.api=this.api}async authenticate(){if(!this.authFlow)throw new f("No auth flow in progress.");return await this.session.authenticate(this.authFlow)}async logout(){await this.session.destroy(),this.connector.destroy(),this.authFlow=void 0}startAuthFlow(e){e.api=this.api,this.authFlow=e}async getAuthenticatedUser(){return this.session.hasRefreshCredentials()?this.session.refresh():null}async getAccessToken(){return this.session.hasActiveToken()?this.session.token:this.session.hasRefreshCredentials()?(await this.session.refresh(),this.session.token):null}async getAppSettings(){try{let e=await this.api.get(`/api/v1/apps/${this.appId}`);return{id:e.data.id,name:e.data.name,verificationKey:e.data.verification_key,logoUrl:e.data.logo_url||void 0,theme:e.data.theme,accentColor:e.data.accent_color||void 0,createdAt:new Date(e.data.created_at*1e3),updatedAt:new Date(e.data.updated_at*1e3)}}catch(e){throw c1(e)}}};var l3=require("@ethersproject/providers");var z1=require("react");var w=()=>{throw new Error("You need to wrap your application with the <PrivyProvider> initialized with your app id.")};var v2=(0,z1.createContext)({ready:!1,authenticated:!1,user:null,login:w,linkEmail:w,linkWallet:w,logout:w,getAccessToken:w,getEthereumProvider:w,getEthersProvider:w,getWeb3jsProvider:w}),E=()=>(0,z1.useContext)(v2);var w1=class{constructor(e){this.connector=e,this.meta={wallet:this.connector.walletType}}async authenticate(){if(!this.api)throw new f("Auth flow has no API instance");if(!this.connector.walletType)throw new f("Wallet must be specified");try{let e=await this.connector.connect({showPrompt:!0}),a=await this.connector.chainId(),i=await this.api.post(X2(),{address:e}),o=this.connector.prepareMessage(a,e,i.data.nonce),C=await this.connector.sign(o),d=await this.api.post(Q2(),{message:o,signature:C});return{user:d.data.user,token:d.data.token,refresh_token:d.data.refresh_token}}catch(e){throw B(e)}}getEthereumProvider(){return this.connector.getEthereumProvider()}};var v1=class{constructor(e){this.meta={email:e}}async authenticate(){if(!this.api)throw new f("Auth flow has no API instance");if(!this.meta.email||!this.meta.emailCode)throw new f("Email and email code must be set prior to calling authenticate.");try{let e=e4(),a=await this.api.post(e,{email:this.meta.email,code:this.meta.emailCode});return{user:a.data.user,token:a.data.token,refresh_token:a.data.refresh_token}}catch(e){throw B(e)}}async sendCodeEmail(e){if(!this.api)throw new f("Auth flow has no API instance");if(e&&(this.meta.email=e),!this.meta.email)throw new f("Email must be set when initialzing authentication.");try{let a=t4();return(await this.api.post(a,{email:this.meta.email})).data}catch(a){throw B(a)}}};var x1=class{constructor(e,a,i){this.meta={provider:e},this.meta.authorizationCode=a,this.meta.stateCode=i}async authenticate(){if(!this.api)throw new f("Auth flow has no API instance");if(!this.meta.authorizationCode||!this.meta.stateCode)throw new f("[OAuth AuthFlow] Authorization and state codes code must be set prior to calling authenticate.");try{let e=a4(),a=await this.api.post(e,{authorization_code:this.meta.authorizationCode,state_code:this.meta.stateCode});return{user:a.data.user,token:a.data.token,refresh_token:a.data.refresh_token}}catch(e){throw B(e)}}async getAuthorizationUrl(){if(!this.api)throw new f("Auth flow has no API instance");if(!this.meta.provider)throw new f("Provider must be set when initialzing OAuth authentication.");try{let e=l4();return(await this.api.post(e,{provider:this.meta.provider,redirect_to:window.location.href})).data}catch(e){throw B(e)}}};var $1=require("react-device-detect"),n4=l=>{let e=new URL(window.location.href);if(!window.ethereum&&$1.isMobile){let a;switch(l){case"metamask":$1.isIOS?a="dapp://"+e.hostname+e.pathname:a="https://metamask.app.link/dapp/"+e.hostname+e.pathname;break;case"coinbase_wallet":a="https://go.cb-w.com/dapp?cb_url="+encodeURIComponent(e.href.replace(/\/$/g,""));break;case"wallet_connect":break;default:break}a&&window.location.assign(a)}};var t3=k(require("react-dom")),F2=k(require("styled-components"));var j=require("react");var q1=require("react");var x2=(0,q1.createContext)({showPrivyModal:!1,getAuthMeta:w,closePrivyModal:w,initLoginWithWallet:w,loginWithWallet:w,loginWithCode:w,loginWithEmail:w,resendEmailCode:w,initLoginWithOAuth:w}),Z=()=>(0,q1.useContext)(x2);var c4=require("react/jsx-runtime");function s4(l){return(0,c4.jsx)("link",{rel:"prefetch",href:l.src})}var Y1=require("react/jsx-runtime"),d4=(0,j.createContext)({app:null,currentScreen:"LANDING",lastScreen:"LANDING",navigate:w,navigateBack:w,showSocials:!1}),p4=l=>{let e=l.client,{authenticated:a}=E(),{showPrivyModal:i}=Z(),[o,C]=(0,j.useState)(null),[d,p]=(0,j.useState)(null),[c,b]=(0,j.useState)({accentColor:"#696ffd",theme:"System"});(0,j.useEffect)(()=>{async function M(){let A=await e.getAppSettings();b(A)}M()},[]),(0,j.useEffect)(()=>{a||C(null)},[a]),(0,j.useEffect)(()=>{i||(p("LANDING"),C("LANDING"))},[i]);let h={app:c,currentScreen:o||"LANDING",lastScreen:d||"LANDING",navigate:M=>{p(o),C(M)},navigateBack:()=>{C(d)},showSocials:l.showSocials||!1};return(0,Y1.jsxs)(d4.Provider,{value:h,children:[c&&c.logoUrl&&(0,Y1.jsx)(s4,{src:c.logoUrl}),l.children]})},u=()=>(0,j.useContext)(d4);var e2=require("react"),l2=k(require("styled-components"));var u4=k(require("styled-components"));var E2=require("react/jsx-runtime"),h4=({style:l,...e})=>(0,E2.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",style:{height:"1.5rem",width:"1.5rem",...l},...e,children:(0,E2.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})});var A2=require("react/jsx-runtime"),f4=({style:l,...e})=>(0,A2.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",style:{height:"1.5rem",width:"1.5rem",...l},...e,children:(0,A2.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"})});var x=require("react/jsx-runtime"),_2=()=>(0,x.jsx)("div",{}),m4=({backFn:l})=>(0,x.jsx)("div",{children:(0,x.jsx)(f4,{style:{color:"#6B7280"},onClick:l})}),b4=()=>{let{closePrivyModal:l}=Z();return(0,x.jsx)("div",{children:(0,x.jsx)(h4,{style:{color:"#6B7280"},onClick:l})})},L3=()=>{let{app:l}=u();return l!=null&&l.logoUrl?(0,x.jsx)("div",{children:(0,x.jsx)("img",{src:l.logoUrl,alt:`${l==null?void 0:l.name} logo`,style:{objectFit:"contain",width:"120px",height:"24px"}})}):null};var P=({backFn:l})=>(0,x.jsxs)(M4,{children:[l?(0,x.jsx)(m4,{backFn:l}):(0,x.jsx)(_2,{}),(0,x.jsx)(L3,{},"app-name"),(0,x.jsx)(b4,{})]}),k4=({backFn:l})=>(0,x.jsxs)(M4,{children:[l?(0,x.jsx)(m4,{backFn:l}):(0,x.jsx)(_2,{}),(0,x.jsx)(_2,{}),(0,x.jsx)(b4,{})]}),M4=u4.default.div`
+- https://privy.io`;this.ethProvider=new b1}initialize(){let e=q.get(g2);i4.includes(e)&&(this.walletType=e,this.connect({showPrompt:!1}))}destroy(){this.walletType=null,q.del(g2)}async connect(e){var a,i;switch(this.walletType){case"metamask":this.ethProvider.setProvider(window.ethereum),(a=window.ethereum.providers)==null||a.forEach(async C=>{C.isMetaMask&&this.ethProvider.setProvider(C)});break;case"coinbase_wallet":this.ethProvider.setProvider(window.ethereum),(i=window.ethereum.providers)==null||i.forEach(async C=>{C.isCoinbaseWallet&&this.ethProvider.setProvider(C)});break;case"wallet_connect":let o=new Z2.default({infuraId:d2});this.ethProvider.setProvider(o);break;default:throw new G(`Unsupported wallet: ${this.walletType}`)}return!await this.isConnected()&&e.showPrompt&&await this.promptConnection(this.walletType),this.address()}async isConnected(){switch(this.walletType){case"metamask":return await this.address()!==null;case"coinbase_wallet":return await this.address()!==null;case"wallet_connect":return this.ethProvider.connected;default:throw new G(`Unsupported wallet: ${this.walletType}`)}}async promptConnection(e){try{switch(e){case"metamask":await Promise.race([this.ethProvider.request({method:"eth_requestAccounts"}),G1()]);break;case"coinbase_wallet":await Promise.race([this.ethProvider.request({method:"eth_requestAccounts"}),G1()]);break;case"wallet_connect":let a=new Z2.default({infuraId:d2});this.ethProvider.setProvider(a),await Promise.race([a.enable(),G1()]),q.put(g2,e);break;default:throw new G(`Unsupported wallet: ${this.walletType}`)}}catch(a){throw k2(a)}}async sign(e){let i=new C4.providers.Web3Provider(new k1(this.getEthereumProvider())).getSigner();return Promise.race([i.signMessage(e),G1()]).catch(o=>{throw k2(o)})}prepareMessage(e,a,i){let o=window.location.host,C=window.location.origin,d=`${o} requests that you authenticate with Privy.`,p=new Date().toISOString();return this.createSiweMessage(e,a,o,C,p,i,d)}async chainId(){let e=await this.getEthereumProvider().request({method:"eth_chainId"}),a=Number(e);return String(a)}async address(){let e=await this.getEthereumProvider().request({method:"eth_accounts"});return Array.isArray(e)&&e.length>0?(0,r4.getAddress)(e[0]):null}};var w2,j1=class{constructor(e){let a=e.apiURL||j2,i=e.timeout||$2;this.appId=e.appId,this.connector=new B1,this.connector.initialize(),w2||(w2=new F1),this.session=w2,this.api=new U1(e.appId,this.session,{baseURL:a,timeout:i}),this.session.api=this.api}async authenticate(){if(!this.authFlow)throw new f("No auth flow in progress.");return await this.session.authenticate(this.authFlow)}async logout(){await this.session.destroy(),this.connector.destroy(),this.authFlow=void 0}startAuthFlow(e){e.api=this.api,this.authFlow=e}async getAuthenticatedUser(){return this.session.hasRefreshCredentials()?this.session.refresh():null}async getAccessToken(){return this.session.hasActiveToken()?this.session.token:this.session.hasRefreshCredentials()?(await this.session.refresh(),this.session.token):null}async getAppSettings(){try{let e=await this.api.get(`/api/v1/apps/${this.appId}`);return{id:e.data.id,name:e.data.name,verificationKey:e.data.verification_key,logoUrl:e.data.logo_url||void 0,theme:e.data.theme,accentColor:e.data.accent_color||void 0,createdAt:new Date(e.data.created_at*1e3),updatedAt:new Date(e.data.updated_at*1e3)}}catch(e){throw c1(e)}}};var l3=require("@ethersproject/providers");var z1=require("react");var w=()=>{throw new Error("You need to wrap your application with the <PrivyProvider> initialized with your app id.")};var v2=(0,z1.createContext)({ready:!1,authenticated:!1,user:null,login:w,linkEmail:w,linkWallet:w,logout:w,getAccessToken:w,getEthereumProvider:w,getEthersProvider:w,getWeb3jsProvider:w}),E=()=>(0,z1.useContext)(v2);var w1=class{constructor(e){this.connector=e,this.meta={wallet:this.connector.walletType}}async authenticate(){if(!this.api)throw new f("Auth flow has no API instance");if(!this.connector.walletType)throw new f("Wallet must be specified");try{let e=await this.connector.connect({showPrompt:!0}),a=await this.connector.chainId(),i=await this.api.post(X2(),{address:e}),o=this.connector.prepareMessage(a,e,i.data.nonce),C=await this.connector.sign(o),d=await this.api.post(Q2(),{message:o,signature:C});return{user:d.data.user,token:d.data.token,refresh_token:d.data.refresh_token}}catch(e){throw B(e)}}getEthereumProvider(){return this.connector.getEthereumProvider()}};var v1=class{constructor(e){this.meta={email:e}}async authenticate(){if(!this.api)throw new f("Auth flow has no API instance");if(!this.meta.email||!this.meta.emailCode)throw new f("Email and email code must be set prior to calling authenticate.");try{let e=e4(),a=await this.api.post(e,{email:this.meta.email,code:this.meta.emailCode});return{user:a.data.user,token:a.data.token,refresh_token:a.data.refresh_token}}catch(e){throw B(e)}}async sendCodeEmail(e){if(!this.api)throw new f("Auth flow has no API instance");if(e&&(this.meta.email=e),!this.meta.email)throw new f("Email must be set when initialzing authentication.");try{let a=t4();return(await this.api.post(a,{email:this.meta.email})).data}catch(a){throw B(a)}}};var x1=class{constructor(e,a,i){this.meta={provider:e},this.meta.authorizationCode=a,this.meta.stateCode=i}async authenticate(){if(!this.api)throw new f("Auth flow has no API instance");if(!this.meta.authorizationCode||!this.meta.stateCode)throw new f("[OAuth AuthFlow] Authorization and state codes code must be set prior to calling authenticate.");try{let e=a4(),a=await this.api.post(e,{authorization_code:this.meta.authorizationCode,state_code:this.meta.stateCode});return{user:a.data.user,token:a.data.token,refresh_token:a.data.refresh_token}}catch(e){throw B(e)}}async getAuthorizationUrl(){if(!this.api)throw new f("Auth flow has no API instance");if(!this.meta.provider)throw new f("Provider must be set when initialzing OAuth authentication.");try{let e=l4();return(await this.api.post(e,{provider:this.meta.provider,redirect_to:window.location.href})).data}catch(e){throw B(e)}}};var $1=require("react-device-detect"),n4=l=>{let e=new URL(window.location.href);if(!window.ethereum&&$1.isMobile){let a;switch(l){case"metamask":$1.isIOS?a="dapp://"+e.hostname+e.pathname:a="https://metamask.app.link/dapp/"+e.hostname+e.pathname;break;case"coinbase_wallet":a="https://go.cb-w.com/dapp?cb_url="+encodeURIComponent(e.href.replace(/\/$/g,""));break;case"wallet_connect":break;default:break}a&&window.location.assign(a)}};var t3=k(require("react-dom")),F2=k(require("styled-components"));var j=require("react");var q1=require("react");var x2=(0,q1.createContext)({showPrivyModal:!1,getAuthMeta:w,closePrivyModal:w,initLoginWithWallet:w,loginWithWallet:w,loginWithCode:w,loginWithEmail:w,resendEmailCode:w,initLoginWithOAuth:w}),Z=()=>(0,q1.useContext)(x2);var c4=require("react/jsx-runtime");function s4(l){return(0,c4.jsx)("link",{rel:"prefetch",href:l.src})}var Y1=require("react/jsx-runtime"),d4=(0,j.createContext)({app:null,currentScreen:"LANDING",lastScreen:"LANDING",navigate:w,navigateBack:w,showSocials:!1}),p4=l=>{let e=l.client,{authenticated:a}=E(),{showPrivyModal:i}=Z(),[o,C]=(0,j.useState)(null),[d,p]=(0,j.useState)(null),[c,b]=(0,j.useState)({accentColor:"#696ffd",theme:"System"});(0,j.useEffect)(()=>{async function M(){let A=await e.getAppSettings();b(A)}M()},[]),(0,j.useEffect)(()=>{a||C(null)},[a]),(0,j.useEffect)(()=>{i||(p("LANDING"),C("LANDING"))},[i]);let h={app:c,currentScreen:o||"LANDING",lastScreen:d||"LANDING",navigate:M=>{p(o),C(M)},navigateBack:()=>{C(d)},showSocials:l.showSocials||!1};return(0,Y1.jsxs)(d4.Provider,{value:h,children:[c&&c.logoUrl&&(0,Y1.jsx)(s4,{src:c.logoUrl}),l.children]})},u=()=>(0,j.useContext)(d4);var e2=require("react"),l2=k(require("styled-components"));var u4=k(require("styled-components"));var E2=require("react/jsx-runtime"),h4=({style:l,...e})=>(0,E2.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",style:{height:"1.5rem",width:"1.5rem",...l},...e,children:(0,E2.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})});var A2=require("react/jsx-runtime"),f4=({style:l,...e})=>(0,A2.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",style:{height:"1.5rem",width:"1.5rem",...l},...e,children:(0,A2.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"})});var x=require("react/jsx-runtime"),_2=()=>(0,x.jsx)("div",{}),m4=({backFn:l})=>(0,x.jsx)("div",{children:(0,x.jsx)(f4,{style:{color:"#6B7280"},onClick:l})}),b4=()=>{let{closePrivyModal:l}=Z();return(0,x.jsx)("div",{children:(0,x.jsx)(h4,{style:{color:"#6B7280"},onClick:l})})},L3=()=>{let{app:l}=u();return l!=null&&l.logoUrl?(0,x.jsx)("div",{children:(0,x.jsx)("img",{src:l.logoUrl,alt:`${l==null?void 0:l.name} logo`,style:{objectFit:"contain",width:"120px",height:"30px"}})}):null};var P=({backFn:l})=>(0,x.jsxs)(M4,{children:[l?(0,x.jsx)(m4,{backFn:l}):(0,x.jsx)(_2,{}),(0,x.jsx)(L3,{},"app-name"),(0,x.jsx)(b4,{})]}),k4=({backFn:l})=>(0,x.jsxs)(M4,{children:[l?(0,x.jsx)(m4,{backFn:l}):(0,x.jsx)(_2,{}),(0,x.jsx)(_2,{}),(0,x.jsx)(b4,{})]}),M4=u4.default.div`
   height: 64px;
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@privy-io/react-auth",
-  "version": "1.4.0-beta.2",
+  "version": "1.4.0-beta.3",
   "description": "React client for the Privy Auth API",
   "keywords": [
     "authentication",
@@ -18,8 +18,9 @@
   },
   "license": "Apache-2.0",
   "exports": "./dist/index.js",
-  "main": "./dist/index.js",
+  "main": "./dist/index",
   "types": "./dist/index.d.ts",
+  "typings": "dist/index",
   "files": [
     "dist/**/*",
     "LICENSE",