\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"cc7b2d5875ceb10dd9150fd1271fc5f403aa9cab","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.0-beta.1","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-3FmTuGEYZPMsya24zpxYKoKi3bi9BQXebES8G+xppDR/cXJrTNwDADvKH6pj1FGG72+dl8ueyLdHr/3vB1bVDA==","shasum":"8765f3f51180b65729aa84cb0c0b66a4a5d79a50","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.0-beta.1.tgz","fileCount":112,"unpackedSize":3837938,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLHWHusq0mJ2XWJ3KkQ5Ic3kizMB5YxTROvbzvzTnfRAiANclhuirYnaqyqF3xPaHhe4UsRZ6Y0cBdWZxlLuwHd1g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9v64ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzhBAAkwVvm5BZSoNen9yc0ruVNRywTgrXASeZhhxb9tRu5xnIwATS\r\n3bkAIPOMEq5KHYtyi8DRuSjk7ap6sayK1FZt9AsQFEN1l+j/wMShKeg+gyD5\r\nWVrRgWHFOFrynpSspr7qUc8loFGiaCzHymny+Ddrat9GEGe+CB7zUnQioyY9\r\nOScAN6ZdW3F024VpMAWHWYZ//N09ZXn2F8y3TUV7SRWcjU77OIpEo4FXS78J\r\nkgRjQBqNSjfOVQPQehLYql/aqb4QN1cpZrKaoPEXQNjNdysDVnnMGsSn3q9b\r\nsjb753/tWj0rXrCestyB4daijMMahjDPdcDwH8SwC+DDDZbj0Hnf2oRTNEJ3\r\nT2sW7Cf9rSC2hy6tFLZAtOBnQqjN8CcBcp349KxClO9x34MU+pNXemlkRsAV\r\n63qSsIhKazGaLAm63QVhyhad1VafGhxp1v5t3NMfLFcTALxnmjfumlkPIsqF\r\nfhBxNUcA/dKSTWJ+6ofkI4ZhdeixmHgy7dUbRooxasnU7pd2LjIIjBgtYpRZ\r\nF1u4SfKWr5NVFaazgty8welb3oDKdsnfn29fwC9D3S13/P9uiLMTy7zDeCGk\r\nS3CgaXtLxL+hSrRNL6dOxuNF/75mEnagQfqZwx+EsWRcfmhvC5awDw1bY+Ne\r\nUrET979Ip1nPS+j+9tX+HLdCa3ui9Gq80s8=\r\n=97gu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.0-beta.1_1660354232018_0.6633866573874232"},"_hasShrinkwrap":false},"0.7.0-beta.2":{"name":"@slashauth/slashauth-react","version":"0.7.0-beta.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"36d64ed5fcb6f0ada31a2861bf7f4caf4c2e1d12","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.0-beta.2","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-GOgOOpZ90y0RSU8DJ4b6u2TCEJWXNg1SBR0tNyIfGa9qaUzeLVwKXURD8p6eCrz+B1U1kn8jRReSHenindL1fw==","shasum":"9204d1da1ce27b3a48a96a1d0b100399323a3640","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.0-beta.2.tgz","fileCount":112,"unpackedSize":3837778,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICLZpHdeA7kE5kfK7aJgx7hXJV7dL7gc7JNVS0lH3x/TAiEAuZNx1PE13EkL3ZVf6C4SAmHSX7/qUYltdwlL5JL6VOo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+WnFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpbyg/7Bmk4O1ZYAaOvTBVEZHGpxlCGilCJAa5BALN7rDqXL2AWpYD6\r\nPcCk9HjNnUoR11XmTxsndiXdI5CyD0fO4Rp+/YPL6pG9SQDgdIge9SmTVtRP\r\nALjuWUdZQDJdMhK17yfbuvoVNR+ltk+CfrL0kDUxFim/mLCnzEhw67NWqGD+\r\nRLtLAR4D2CxBQej+PR6d8ToDxJ6OdHiROoQYHVFathGYYNECjjBuNov+ET9S\r\nSLfQm61E1Q/VDutLt+UNrvC9dTqpV977jwtCONzKM0qyBuiF9q74ORoo9rZ2\r\nHKCtd8T2DXLusfImHF0gsouf0EE3wJlGsNHbNeluQBoDAFL3Ci3wO69Okbci\r\nGw9jQIXotSx+T8WvPrFmjT1pd7DPlg9khHfqd/A0jeBQep+yM5p5Vk1rBUoq\r\nCWksN/Yp+7O7lr0JBmawTHFPuhdFx1x+QJ5PsClCSFzOUXhhDWUmzh6C/0s8\r\n7VDbaJq484H4bSAHd3hrjSGU1Rx0+928TLDTveofwh1NqM4XnHY68IJ83ZNC\r\nZtQelW8ndK9AmC4wIU+TU3CUpCLb9Wzq1s1YaFxpZwc0SGjKnHRYYlo9FEK+\r\n3FHY8vcWNAOhkmftfbssKOi5UF+EhkkwzNUFvaZ1nAblhS5Nqcq1eFQxj5zo\r\nRY8uLH+ZtSA1kHhsZnLLj92VAxO8CT88ui8=\r\n=UTtS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.0-beta.2_1660512708995_0.16142122770251843"},"_hasShrinkwrap":false},"0.7.0-beta.3":{"name":"@slashauth/slashauth-react","version":"0.7.0-beta.3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"ec9cd860279e0cda2e86975976b454eaaff0babb","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.0-beta.3","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-eA8jjOs94LjUKGwUYS8CHy6YEMz0gl36DtrpB1BLh7TlBa191TxF+IwgWSovkgGluWfZhw9voIhYTvvu//TNzA==","shasum":"86f90215e9c242d30d9242fbee050d628671b581","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.0-beta.3.tgz","fileCount":113,"unpackedSize":3841824,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxU5Xbkv9c5A1G88JIND0wnbS0clZJf37cjTyhMqMoOQIhAIn/QSCfyRt5hc8p+hsCBvlPGKBihv99uDzl8kQehIVA"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+YkFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRYQ//VPURsPBD6qDN282lmlW/fgydsC8N0vO7yhm7vLFa+UYKTPW/\r\nAxN2HAuX40pAjoRABv35rTvgL/xU84BDudxDqigqIic6J1rdkQTQm/bslmcp\r\nBXaP0l/bTlcTtxSRh1/uR4h5++3+xCdChMONIb46r7joDIq64mE9O/yct2af\r\n6sQ3hNDAyQbjAt/aVcpMtkwGo4ru/qnB1kYKG+MfA/pwqvEtHTy3/EqWqN2i\r\nhZ/ZKIZ+FGX6P49nNtri1mL4HXJF0ZS8JN2qqnofv8CLIy1DNe3pB9goRj7S\r\ndtOwV8hF5iasioQkeJJ7D2vbGjHz3BSKOURxa3EGD3UaVl52ImXO4MyERqCe\r\n/KHSwETqVVDMB77SsUGyi3r/YCzPJBiGFJuCFQx0WoqQ5N5dyXFmBdFsZ6K4\r\nZ+z3rY0nn899KE9HD/4g9Z6YTqD8aeq6+D86a+ExANko5MI5dnbQWMEp00t8\r\nlKesKo94EqI+I+qrcdptzyHmYIPZ3BpCqLkQiR0z+R1FSXi7nKLyAyrywBMF\r\nRTM5C626+RB5GhTdmA8MlL5ddASSmB8JrTIVMHfz73gZNFiZRkzU//2XJD8c\r\ntlNa99ACy8r4tmLsdcEg0vkjbedbexSgeTRixGi4Mo4dj90jbK5AOot1nc5L\r\n6rAFi8r8/F5C6rd2A/rufVffhqAnq0/F8zQ=\r\n=bBrf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.0-beta.3_1660520709587_0.7064826085888043"},"_hasShrinkwrap":false},"0.7.0-beta.4":{"name":"@slashauth/slashauth-react","version":"0.7.0-beta.4","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"ed95117dbc83dc1605a5526da0aae5f7f31a97e4","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.0-beta.4","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-2mnQdy4F60xRZuRYfzZ21M9WEBDqSInU0eJ5mdT4WpdDl4b5tHUpmp8fV2d/5g0U9HbK0bh0eULQeaFxVKmacg==","shasum":"fc458113480f62170b5d296a7c5397bc887e5c3e","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.0-beta.4.tgz","fileCount":113,"unpackedSize":3841914,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDY6lbTPrfNqSqbX5AKbcs97lk9s3BmL7T8DeUrGN24MgIhAPV5ozK370r4SRrbDaC1EAj8T/CcBipT3E5IalsUnBvL"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+Yr8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqH3A/8CmmDtAUM83iPN0EmYasWw6gE19LGU2qSn54O3H2D+BfTVWGa\r\nbPggtEKMnYRVJ9BiPYtRnM4aX2PhnuabWONqjnDXg6jOvAn6mv101uPM5Z0L\r\nTv0KG77BryvldUD3Zq7qJIDpf9qpT4qoFB8SWsglqv+lmYXsBRXJ2idrY/Va\r\nYrKmLzNz3LaZiR9hiBknpOG1iueDdMNxMYg6jI5BokmROuxhuvaSlNuH8Vwy\r\n8tnmuN5fknbNdSLjAV4FkZF15zQcF9TxVOAA3HsyQqusaOpg+MwrXwM47A9r\r\nCad+Rb5f7w3iXwVKU4Bd2Eu9//WFt6qlIyJ+O7Syy0CYfF9xBlS5UaNlXC7A\r\nRUn7XTa4NyORd3mvjyfFv/vQEpBFqJH4UA+OfzeuaYW2v+289TV7Z7kJe+ay\r\nYfz2cJcTV7zp1sz/TRBfPTCEyBIr2CPZQNw4UzuYtnYDyt7fvnVgHQReq+27\r\n1QMP7YUWXYmsSlYgE5YeeT3VeQdjwCCQGdmJXgYM1d/uVze73vQxQacRuv1I\r\nw5GAIGmpOrJ6KvFrvyPs/4NMYQVHZC0FHteuafbxrWRazK7U6eTFLMXsI1Mp\r\nfEjp+1x01+YpKaqyT1TcgCwupitC86hNT77eLNoMS78fbjICN+xlRXeeVSS6\r\nbCG2q6cx5bg5NEBtK+Zuls/EAAOPKF6I784=\r\n=APIo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.0-beta.4_1660521211887_0.4539096083560423"},"_hasShrinkwrap":false},"0.7.0-beta.5":{"name":"@slashauth/slashauth-react","version":"0.7.0-beta.5","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"ed9c0db8423bfdea3d6059d1f31184cb7464db3e","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.0-beta.5","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-Ty/Gtc9LExEooeHV9DCysqZR/BV/DFjEDAr2V+iTvjUz7xVaHgCQwE1QmurH+cdXcUJczi3umdLe9Km7dMl2gw==","shasum":"ff0ac062ba84e757046a7221ab59fcbaa76b37dd","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.0-beta.5.tgz","fileCount":113,"unpackedSize":3841841,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTygliru7dGGzlr3A7L9EQcBHMdirNxmIFdsjJ5DJKswIhAJkckyXrbQMrokQ4bF2In/b7vYRJgx6TwQxrry/H/sbf"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+m+IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8Tw/5ATrB2nbp3XnICuGvbHIBAAWk3be5UxsT1h2lp4aPLayScwdC\r\nOZgrIuiDGwqs6be6mJPJb5D/F25YLy5CKMj3Wc8jcf1aJJGOCoTDP6bEgO2R\r\nSwCEd7MrhCjZ97QVTk6bNSeLT4M9olpBqKtiuBr1P9NB2C+6mgVTxRw2xf5R\r\nX1ueT52aRtVfcTuYDheFds4bJcil6G9PIyR0VGEKh5dL11UEr+5fl2tIaOZN\r\nSE+RITmkdyGT+Vbjzn+6kFJzA1vqXsg/OWcdlRn6MmYkF0L79LBlUbxqOV4w\r\nJxXQmqfE7pOEN73EmqYUZhA0KXf64ZhiijSXNV751fB52CojYUIedpxh9b+w\r\ngG6DZU35bIz4VBDaBV56oVw6R9Cx+n+f8sMlqX3Xg6Tg436D3kAAD713wL23\r\nfK5s8d5rs3rOnRf8M+cng64WAL8ZkA4AxxL9g+ObWyBt8kI5F43LJeJSagHC\r\n9HngPSKnbz8H4TMgL1xug7q5cRYn9DFqbOTXBta2QeTFKEeSXp4R/luc2qqf\r\nI8rVVdCrT+sMy/FvFjd36ZdQqz9hD1yxReDg4Orubo6E2d++VfAllprOVbiE\r\nRVYy4J1N83QV1wqKjBQOyG+N/cfWXC43qCuT8dTWGZdei7x2LrwOUxMEwZfd\r\nIcK8qtmnpeNA9yvdqVsjbpFqBVvhl8+Zv3w=\r\n=kSY8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.0-beta.5_1660579720327_0.40034677260072193"},"_hasShrinkwrap":false},"0.7.0-beta.6":{"name":"@slashauth/slashauth-react","version":"0.7.0-beta.6","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"6a4605dc22ed48874824ee9fb05ba87b193c071f","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.0-beta.6","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-xrlyIwkIvi7T1zbM4aM84jRH6TDdlniPeEsqtx091KDTrCGb5J7ngUfOxVE18z04wSI03DO1Zkudll6RXs7WhQ==","shasum":"22172b265a8e867349563f4620a4cb28dff4e74b","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.0-beta.6.tgz","fileCount":80,"unpackedSize":10260929,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfmroKYxhgbczx4ShrWsc2mrTMX0ClJ6LlUz/56OrQIwIhANqxesumQ7XmEZlinN2tyAKWiQFsNgAaGKYV7biYUwuB"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+tErACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+3xAAgU4gskxFLGydGrCZ9kAAtmNgv4XWzDH6s7q3Yo8IkwWUkD6V\r\nsvo8dV3MgEGbp82bNEj0BtMe1Pr1TdklgqH/6qkzoRIxsZfqALSQh2pLZMyy\r\nzXGTxozNJ4aNST20kEc7uh8q4SsmGCyohSdzb/vq86hW7BR1XEXQdtVB1k1T\r\n4xmEPKirjOGsSVB75ZdLQiqEOxoggCD/bTruTk98AqBQdqRtOhDcnl/UGSj0\r\nsyQiirbx/qw0M5zFS64VLrkmuxVcoUxX6hkq2tQxx5uUlVMIV/rjDuDTwYoV\r\noWBGYpCQyC5YQM3N3R1qJw28BgMGWTzJ0Ka24ibb+C/dyXI54ePQcFE1Gdcb\r\nyG2Z7TkexSugT9mhAFu9HQzS8tvMVQqzo1UaQUfi3Ilg9P8LMJAPWNi68b/+\r\nqv4aNFv2Mwpc+NhDr1BN6wLsA/lix5fFabr09UGYOGID4CZZt9pvsXF1o1Ho\r\nbX6paxHtm6jWpcQjfOQtUmWk84q57tv1JhCw4BAVaoKpMOXwVBHipcJQC2bp\r\nQtktUE27D6UJnRU0l5bvYlNxUWQSEKfMo274vGYkegS70cZ4dwoLjlt4z8Ur\r\nBXAujAToMumHq3pyzL/o3zKgy3r+wU7CnXFE7Bk7K621lpclyZlG0VsiNev9\r\n1t2+cLKZcOUIWqtj3jQ1POMN2K3WkHa6IyE=\r\n=9Ik0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.0-beta.6_1660604715116_0.44633668700187035"},"_hasShrinkwrap":false},"0.7.0-beta.7":{"name":"@slashauth/slashauth-react","version":"0.7.0-beta.7","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"e43b8176b2d4b0b955d27ba84c9ff82c4e1345b0","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.0-beta.7","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-xGyWss9WCegmZ8/dkDy4n94tu9nB/KhAeyCJG/2qndTslfdX1dgfym+r6dXgpSqPd5Gqkphut0McWl1xussk3g==","shasum":"1ee38303cc854e40d8f945cd8d557dd50bb263cd","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.0-beta.7.tgz","fileCount":80,"unpackedSize":10260865,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHtCyP6dhlvHPp5VAGeKaUs69aUQkBbA7Snk+WfGvRxKAiEA/aaeqfiFPwFuK1SQ4P2I5xBYWghh/YQ5X4tXp1jQBtA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+tICACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrrmg/+KueQZd6h4cnaxO4YRPaE9AaW8CgUN0Q1Uk54yn6ir4NJ+CQp\r\nOOYTWur52pheHaqKGmOzepeCbdzL0xSh3M1/uNUW3kIeCcoSI8Wd/aUdt2d9\r\npJx47a5KipUfAwu37rQZ1diHWBy6LG2ZuakY+x7hD2vaQmOswD8xISqJmcjn\r\nkQm7ENYjQZr6yV3N0I9VfkTuL19hT0WTvH584fdmCrL32ctI1RK36GzbWSvb\r\n0A6MyTBWDjKzRoUuq2CxbdBuG/j26yi1cwSegmnL5nFnKYbVDIaQAMO018wG\r\n884TwvSPxulqNWnwUNkRkJUnRaqbgmNIQ0fQHVOu5vhrxaXiMB2X5+DAhFnf\r\nOwVKIEPjRmkX0hwiU07aNKyez62CF57A0ZAL2gig14NIyJ/8eV7QcdkKoJT4\r\n+dTF+7bXpwawJAau9ZTJXOM/IH5Bjj8wyYIUzlCyFM1Vq5IxspxTzG84ipQR\r\niJ7NDHKrcJUZ37JSi1tYhphKFXLkUo5WnfIXjr71afoKvklrcfbt7J/88PCf\r\nndrJz1P7i3cslWjkcg54tbW2sMhZtAx+VgmrEUUMfDAAJ66CJLryjhnFjw/V\r\n+K5daup/AOv86SzSYJpcSbWp8fRjAGYrllihs7b4BeHuX1fH32fe8QhJ+tnU\r\nHpYymGU7t8fJDlDOCne4DaUh0iht2HfEIqc=\r\n=7XiO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.0-beta.7_1660604929727_0.7740272358169751"},"_hasShrinkwrap":false},"0.7.0-beta.8":{"name":"@slashauth/slashauth-react","version":"0.7.0-beta.8","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"918da0e649f2cd5a5c09d4de712614f0ee7cc667","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.0-beta.8","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-L0ypwGSQKj/jEFxI8YKokFeAZxQnzTGFKAW307v5Ll6RI/jYDrCSzjISXbvwKdwu5yzxGpfXjFuvwvSR0mE/MQ==","shasum":"56632308e89c75845a7524ff2372b932ae9ba6d5","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.0-beta.8.tgz","fileCount":113,"unpackedSize":3843590,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE5kCRQMnXpvmcyGKpaEOUeiuhRlWUWQbzNXNYh4qnP1AiEAk6gIaH+0nmDD1i1iFVzlkUzm4w23CzvqgIpXp3FFIF4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+tVOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSwRAAlcOHhnO6Fa1YvzrLk2djM5wpJiSHMY4f7jyb1UWobqj1Ukmi\r\nOhdIkXjTBV1VHh1Bw6vYn3zjWh5ydyKYoFHFob78vi7egm5u43iUzl3KWIvA\r\n5rQwTN7TyQlHmtVZqllQf1nX5J5Yf9GrN/P64jkirqOTfkSkyGIAnEQy2sW7\r\nZ2PmGab32GT96uUVryc6dk01O8gri43C4G2uFc4Nyyo0Nweb+Ggi6+gwkG2B\r\nlgC/Czp3oqPIn3B+XlsWecv6m62IFwoR5QJka69oTfTUwJNqG1fsB5xXWJBi\r\nQ3FnRAcvZJAgiLIUJPd046w2frmEph1k5j5vpjfY2saLzPfBdHrFeyWYaVxt\r\ntjhK/KB+VH8B+wDUpniPqpohIAcBoLuGw7NuV3ansMHC7lwgZw+SjTnn5RMV\r\nCDfAMbuSbgJhG/Rqfie+JikwIhGhhBuTnkifE42oS3iSo7aMAQixsKXdWevs\r\nydm0ReFfhToegBN+6nw9VUctwMceuNdDqx+gvHWBht0soeObbxZGiLVRutoY\r\nWRtmFRTy9NRJV59WDOGOIn+5SaxrbS90uoY4NogzdCvQ8xfyRW6nYYVP09qR\r\n0eEnfTbcAYyoObk9AZupXMojRL052cfimDwWOxzfqm31F2ZwavYveZu6WDxf\r\n5/9IfYRXpG3hfik3bwlu4cI79MaLvgpgUbo=\r\n=DmwO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.0-beta.8_1660605773708_0.549510605944715"},"_hasShrinkwrap":false},"0.7.0-beta.10":{"name":"@slashauth/slashauth-react","version":"0.7.0-beta.10","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"3358850d1efad5e2b12fca6e94e51231424d5a2f","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.0-beta.10","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-g3PEPS+vBJA4LIcy+tMM1ksdqkQVWIjqGryVY0GBWJtzK3Dl/8a2UYv+zsh5yME5A1qoJNVR0i78UGXnYI6SNw==","shasum":"56d2c5c0d94cefd2f32c9bb22f5a00f8b61538bc","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.0-beta.10.tgz","fileCount":113,"unpackedSize":3841669,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUnQWVfmCa/RYNTeGS/spQc+GxuLbMRMc7qMVRCoVvhAiB/NXxKguCeBdxC3UyGnWEL0AXrVN+ZBtYm9+ZXTced5w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+vU/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqBBAAhU9jb8QLjX9OBZfQazn+L2DCMtaRVAT4cKud7ZX3KM+IuJSG\r\nOcSSaBrPdTckBrdohsM09zXgDC1Km5knAs8OAIwBsSe0HzmbVNO2mPBV2rTz\r\nCsT/nDcyWf274swal2u9PiyrXJ5VM6I1DMO/OUFoYUzoE3Qh9V62z0KwlICc\r\nAuC5mAQyCMnKUbmytrHUFXglwVcTf5AGBmuU15JAm+6hAL+V0cWSweWAtomO\r\n1CU8cOPYf2+oFvP1D78d22q7QL4Pq/fylPgWFHOKS3Bhrar8tyvwEpQjyAll\r\nF7faJXllZFfA59kHNk7Z9fdFEQhRjj4VwdTlN7EC4xz5GBNeoNmi67lybXso\r\nzxYuItbeSEsihsEqcIlYOGCibevh7++3A+D4v1M7o4GoOvTs2n6qdrNCtpsN\r\nBlLml3k3Zo38uvQwnk1xVKp+h0ZjCSvrVBjIzQWkES9YfIVkOj5bxJDnJHwN\r\n32lzpva2m6vN0PyER/eulLror3iqij7ksNDpmBRvM8pL47yoHyGir8JOAHEx\r\njTDVeSa83Z6bRoiZAcCq8K1hLniiJPg/4vTsNqBcvDR50rk1qHxIeWUtl7Vr\r\nahH436ExIUbFd3PAwWYAUMpiJfh7knC1uQJxs9YlwpY1uTaNN1TOdQS8ZDdP\r\nTIVZcdnINrfB0LVk8xACmPwGWvaRpyS/nmQ=\r\n=ddAU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.0-beta.10_1660613951309_0.13510759833637964"},"_hasShrinkwrap":false},"0.7.0":{"name":"@slashauth/slashauth-react","version":"0.7.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"08eb8b955dff2a6e100119adbe2621323752d4e0","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.0","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-mztq/yxMedKQYjNh0kPXW1VBO5Ez9EjMvJ6QT1NnpZd74yLeWfkcuO2HZwuqj1s9k2XxR3bG1Xn+zfz/rki89A==","shasum":"fa45e3bd7cdbf76eb28f6c90ba365cd8cd385ee6","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.0.tgz","fileCount":113,"unpackedSize":3841661,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+SdSeuXMjuXQSx5I/Dv5uN2Pw41Qg0UuoUD4d4XUG/wIga+4IisfiUFNCwTjViv7SbWgVTDqCAaV/JUq9S8P8/fk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+wBpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYUxAApGJAp5lqujMYE390kw8MHV1Ovfgsc6w81yAOE7qYJ0OA4qG4\r\nZHeAwk+pEQQ4KEtlabdTt2rha1pdIiOXOLnrAh1taFB5PqulS4y6yJ9KK12D\r\n+9nHBPcL1EPFBL4GQ3bHRHzVFUKWtVAZhfBj505P8xf90bFLyFwlRtMPeTEl\r\nNGwqHPpVta49MP+8iD51n6W6KnXGVUfKtsQliD07KhCnsDVY2ZUKiIR6h/bV\r\n/m0I0NsAvEUcaffD5mb9wrxn+txbDbHGgKfuV4tC5PDYyoG29TXrtjzGp0E+\r\nGh6DcTtmMBHfr9T+RaoNxbV61rhZ8woYV3mV2WAy/pjBXXxs8n+TW48iVC/u\r\n0XJHEhQHU7ISxzDx9ELyHf/W0xbsa66VfDcCCnCLcX9n2hxw9l1e5CljCdhL\r\nsMggp1UzuP17z4ZLxQp6n1QDVuQIOUFst9herbW242TKTUow8xQgwrDBj6/B\r\nNndfwcBtBinajJix/U2pbs4tP/28jckj2e8yJLaWHne8kyzza44Gtc5j7gSS\r\n5t/NzyskABzQORxdaqXf0sx+FUrBjJCknPJcy3gbWv/eQWltB9pxmINy+pbp\r\njyz9vGDFdAaXS9ftoGOPel5a6o3hvXDCTOztcOX+4Q7Rw5xw+0gW3mJLIDAo\r\nSRQpUPeSaAq5Qz8+GwUw1j5BN8A+0rSpOas=\r\n=8aUY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.0_1660616809414_0.2578683755275064"},"_hasShrinkwrap":false},"0.7.1":{"name":"@slashauth/slashauth-react","version":"0.7.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"1e51790b65e3df10951079a02c8854a12d2bfaea","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.1","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-9Q1LEfSqG5EwDb12ujAFEdWa0ObpgyoqGneErdumjfBaiGRiXIHOlhpNDMfse9Z1iYWUkEmBWcMtk54jpTvn2w==","shasum":"5847e57efcde13e0028db92a4d4aef5bbcf25734","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.1.tgz","fileCount":113,"unpackedSize":3841721,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNphTFVFQf+t0jWaGUWHBrDmVY5AxTJej4uh9ygDgr0gIhAOe0I3pIfqxnt0XIIt7uYIYOmy0h7cVWu/Zt2fs2SsiH"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+wyZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUnBAAjZThe5Ug1YQW7qt4AUPDZvyplk8ami5viwcldZ4jT+qd4VKB\r\nJfmijESofp8wFJZvbcUWVS4D4Z+lbrlWQHuh6DeV4wXKy8wjd14Jo+4phpj/\r\n1Gt1TrvU2mzVoSnGkDSXHovkBCNSzt/7SGXGsAPr56N327W1MhkpnPCSZ2xv\r\nfgW9bhiPnBnpOIp7uwBoO8bfKL2dYwfavTQK5t1c0XCwDrE+8HQ4yQ/5xO6p\r\npp2hkhjq0IdCAatemJ/TcJ/YPtTvENzAqhXz6MIc8MH03+rFfc5zX0I5MuF4\r\ne2izKu3H265MEVTL4f+GG10yAvO/iWl7Pdh+XgZFp+LNQZKHZoD8eG+REjq9\r\nJ0wDXigHNWXJsmWwCmPXEn8yKZA14b7ZESJO91t8IXAVqXl/XzCzJ3ekltKN\r\nD0AXDQirKmcE6Sw5eSwqjWW0ig16QmmpddVX2Zz9XHY6ySLeYSxG1Iyj0lyh\r\nM+tnnTewchBUg2CDWCDnGIPaKVzkPogQU35BbMz5odBBL8RnLucFkDjXBL3T\r\n3SidkW/k4f9uC5kaRc8OH5m8Z8igbgSNwFWLkSpOwMcIKK1n0Mg8zpWpBvso\r\nc5w7HvJwO5t0ybBclmQrZ6VvCk67E7zMmxxabeMSgikEaloOl/WoLHM4ikgQ\r\nH8rMCNDOXgSM8r8dIaLhiZZS35tXM9K0DvM=\r\n=V2xA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.1_1660619929623_0.4555584338584675"},"_hasShrinkwrap":false},"0.7.2":{"name":"@slashauth/slashauth-react","version":"0.7.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"249180c3e417a04dde38668603d079c519fbd348","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.2","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-dJi4NKytKZxM3v8rWZqom3fcQQtiiwTUNauN+8pfVbW/Iy8XJQmBE2oUCqhWWBAkqBdN5TqTShPHfOzT8h6bKw==","shasum":"e3ad4af75e74981def3e62f1bbdbe164e9cb3eec","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.2.tgz","fileCount":113,"unpackedSize":3841865,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGRTCVKeGT5W4GNRP4w0Qq4UhWC/GUiBC+/TtLViqUbwIgENH7apDH2PSAt8sXqJejBZ6JtG9kXm542aX54vQum04="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/RW8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZAhAAn8wz9i8wUQM5q5TRh26rHsVfeUjyrt4wpGULpvj2LeoilSH4\r\nsZnNqoEL/tXR8dsPJ8ce2B3AkjTw/aPNvw6JFYbuoJVvZwrvilIoLQlzKNof\r\n2HzqKoesfSjqs+dWiQ5Qt2fqa5mPKK8ds5QrQ29tFumzqIZeDdagK/ZmmGaq\r\nRVBET6Ve2kSkz0QKsR620sFsmfMPlaj0GJaESylCZetQ03CfQwKoleM0LduZ\r\nDR4+Yfl/YYGIoD+8cwT+Z9jE4YUOkZEBOBHRS1FhYMn6wvRBLlFVvTmGstze\r\nlgPk7UIhcu0y7hBLvKw+zPRP64uGu7wvILHFagnkdcqSkU/myLTxgrU7ZNEv\r\nkbxGTfBoCmiQzM+1RUVav8RapapywywW2FVyHH0ax0Ntwt3TF1ON8Rqu4muE\r\n08EOdFWaH/MHd7DqLh5n4nroJvo7C17XHJadOaKqlBEjIEhOt4f/h4hrZ7gb\r\nNgAbdZXdhtmVNR4YhhVaNCi1ViEwLOhUhBW3MPVNasu+FM4am9J5BUs0vEjC\r\nLdcFbdkISTm2jGhl56EaX91WlyxYStkUAqIUXDwJiZpKSoeDvoiSUOe1aPew\r\nCliRS7UL26szslB5CtDQtTUrGryaecIdmKwmqtrKLQmzlAn5AuBnO56/K/iG\r\nrb9vpyxMM1dGZs27YrJTcoFssURvEz/C1gk=\r\n=YuFJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.2_1660753340538_0.6872608846608668"},"_hasShrinkwrap":false},"0.7.3":{"name":"@slashauth/slashauth-react","version":"0.7.3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"b8ac1985cb3155e93b362c265b5d8ecfa9744382","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.3","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-s4yAMEW+CsqbX+yiolkTlZCIsh8FZJOiRcWIXQUb8Q/EKFP8I+ds0yGIPXpGAmx0VcN1E+WbWWGCVkXve4RRMg==","shasum":"054cda2d827b640e208a7a046e76a18200291bd0","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.3.tgz","fileCount":113,"unpackedSize":3842007,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDrPr7lrZ/BoqGlNIndf4XOBiMZxAKtbvgXwUq1GAf2vAiAJjPz0AKW3gFrlmZS0cC5wyuod+geN0dJzKJjbCB3pbA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/WJbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorKw/9EihD3mkfxfltEOY58j2pwQvPRCT+EcqctZrlfDoaoNQRtzxD\r\nhOMn4lG2rBd/KRq91Ji1PHMcB1ED2MpJUW0JFQtT6cb2z/Ov9wIZk8CSRuLm\r\nMnQaYgkF9PqlyDTtmzJA/gQVgbwwX2vNGXGJkGPH0Y3Nr1pTxIb1KRe9SSiu\r\nI4ACqmRF63ZELcpfzGv55ZvbCd9QbHCa+6UmiHlxDPDjT/W2XNUCqfr2wps/\r\nFedrA5ZSN+SQowq7ZycctCa1X7GS4EpIaUdSaIeZgBlPfeqb82cQZVHBGXLF\r\n9vsvPkmglYAxcRqt63lr+m9FYQyorbN2EtASAbrlXlfzyUM86yKL8RvbkFLu\r\nyRDfni7b/YY+KHpfEcyE7k4z3X+yiBLa7PZJOM0KY0xvxSRUGbiiGV+kX+ov\r\nRb2QkTCzzpcCDmcHE+Hqs3P0mGy9WNjSCak3XOojJFSl848FXyMUGx4ezbKn\r\nvl+oosKR0e6xXVMNEMKD0jfk1N+lGUpJ0s5P9siH947C3xUEB52cshx8qGHR\r\nwYloiDFwYthZqvHr/5nBAwoZ2eliXvKDTVvJYTQbsl9lZR6GmVD1j8VQicYl\r\no13a2xK/C1kMVA6ERgBTOCPyj+5+yBTT0D5R856+soimbvnz0v1JerpZJaaw\r\n/1x7aMu3iHTDjl8E6JK/bLXHQDO20sNmnEU=\r\n=wr/9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.3_1660772954968_0.0667741571049234"},"_hasShrinkwrap":false},"0.7.4-beta.1":{"name":"@slashauth/slashauth-react","version":"0.7.4-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"a70f4f084f8e1cb85e891b86ad39d2bac31f0069","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.4-beta.1","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-Jf+9xHhsknP09D1Jq/8PmEj1+TxWCVkttqkhMfTZCWo76tcAFT65gjcyjm7CboeXOS88hbLAgfYjVfpecUW6bg==","shasum":"26a422d5d14c11224f4c112dd3cbb24e5a279b8d","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.4-beta.1.tgz","fileCount":113,"unpackedSize":3842014,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHhVyHW7s0GdtDBJohJjIw95UbFGHX1mrc3n12SemP3dAiB0FlnRtZTTu5fWd8sGqIcoZnvz3hhAEQqva9E5i21xtQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/pJcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfpA/+JK/V6T23fSOFzjlx6i6zxiUntMUbJ7z0gHM3XoRKlHBVDju9\r\njQNMaxd+SWvQ0LZIZqu0zuTgryXhebgWnHPUCHNG39xLp2P+/LMEn6x64hnE\r\nLW6lBhiiOAWlt/EbVmGMhWEVxmumXNxNppUdtiADPycQZek8w0SpVfpvTbrD\r\nS6wi2o9aKwQLqiYwBbsEOjkrKMHRHLqCVMaj15bU4OtFqmUmRSqWyuXHV6Mn\r\nIDiJlCIUzogD+GI9/BKDVsC9TpZ03ceMwo4boeogyklEqgufOFQsGXDY+n/R\r\nJ3ZbKyUYCKp+AjTiPoAo7SvfzTMJ88KILCe576P6/1wYP45KyI2OyQ/7whAZ\r\n4iNDzFQMeHSWfdSoq/eN58/ttf2IKfichuom5OMCEh7E3zV0GZp2EokYsnuD\r\nUNP/c6yzkhMkFuQBQn6dl11YCNMCpO/jnKTLUx3UnD9yAIgSIRe5MizMSafP\r\nCsA4uH9M7rFEQi/l8P+G39CosaQHfJHi3XUvEfJd6nrwxPcVCypPMcYPSHRL\r\nVJXUonqdeWfqjrM0Q1AqFrkWSdmH62KZJCReWr+q64hRTn0FyjJ98o6sV5aU\r\nZi5efB+6TexXU4FHF3l+P3+Kc+W8DS/oTUhBnWfh2wnWAI7it9wY6MhAb/Hn\r\nURSS2WzbdKXkYCfzNMRsfGYTTHstlpYEvAo=\r\n=6Mim\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.4-beta.1_1660850779756_0.04937539769579069"},"_hasShrinkwrap":false},"0.7.4":{"name":"@slashauth/slashauth-react","version":"0.7.4","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"12c65bb9dea8e894e75433b5b7299b1b404cc834","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.7.4","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-x8oFknijTcnncBqH3FEaKhMpXtkLAztDVMB3az1N7rhtAQeCNyaSKqF2WDD6B9Ajdh4hyr2efYr3bT1YoOhhrg==","shasum":"40b7a0614154f00e403caa6933d247f97268e96f","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.7.4.tgz","fileCount":113,"unpackedSize":3842007,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6TF5KTnRU+JQu/Ml2fin7pBMbZUPQejU7shA8LRZcGAiEA25POHnJmGWK87iUbYIeYUB5NlsyelCMVMkGQpcJeRd0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/rltACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNIxAAkypcjkX9vmAwO+aUPjDAjAns7rMGEGiZ88h6J2kM9nq6EqHp\r\nO0njwHlJRV0k+Ijlrcej1RqeBQfsUxKDgMTDT/ZOE2CiI8ZmAo9RCvolxSGC\r\nv0TN4UkWEFNH2DQ3rQI9NaycNyzbVjA0ngKd9SwnYfwNlx5FegOC9ZPnsMMt\r\nRf08LuAEE+/u0naxMqsFjrNHA2n140jwbOyXW0qfYFaOkKeQ3cx6YggPI2bT\r\n7HXulG6an1YIOPrUyyCNP65xpd4oCseiEniZpBp/lZJ+iOa9p2pvsk1gOUAR\r\niDuGIuSvlaolGxQITuRe6QQPc/ecH3uEzdO9cDRUqlbGzOw2ideVoG7I29r/\r\nq9pgzhPpmYNjdw84SljIK58Xr0V8LZ2Fc/pOzmUCcHvY77c74K8R2AaeupWd\r\nzaiHpKZj+aw+iwhoVVfCVtoFe6O427bDz8O0lYGy30p+O+O7TGs59547Ocf0\r\n7wn3YgoVQDsZMUAYkOwm4nTdoNB/F6PUq+oeXqBbjOJsxaGjv5uCBS7KuVnv\r\neQUb5ZkZXgJEzoedls+1eZZBQgHx49FSfl/vBTz6bPZp97DZ2eia72cFPV/D\r\nG6P7/7lPZwxUKgv4IbPNURIfx4j+qzpOtLvXa+zV59GarEzeXtsEAxZ3Mn8W\r\nugzU6vVuVGb+DJFV+9n7qZMAAvdyTnavMDk=\r\n=qXwR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.xyz"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.7.4_1660860780863_0.9144720888104203"},"_hasShrinkwrap":false},"0.8.0-beta.1":{"name":"@slashauth/slashauth-react","version":"0.8.0-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0","zustand":"^4.1.1"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"9ede27140a1fbccf7a8d469d21b645292dbca88f","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.8.0-beta.1","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-srFgQSvXuTph4zFDtA2no4L6hsUnAXlsacjGKClydJM6F+wQpzIQyO6Z89EZQYl0n5aHkwgs1iIsGsjHp98+Xw==","shasum":"e1cfac11f38dd295f703ce8ad7cca489e57c2c70","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.8.0-beta.1.tgz","fileCount":120,"unpackedSize":3845887,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFI3OmHxQwlyZdV2I5cJa8N+fzGdTemFAPJugq6Z+FWgAiEAwb8ZCgNTIEnsEUevTPGXwwtE1BRe/vkppzMPXwN4ln8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjD6r+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7hA//bnO5QDS0IgWTnaRQxnJDeiPHFzChAg0cBwoztGbAUtVhug7v\r\naZjNVvN7tyg0BJL5AZkJn/Pi9XaR/xyC9gXj6EvBwHkABB2kukzFVHyFVsym\r\nL3p3Gcid4fZa9QZNi1bH9rq65079bgTYwzJ6Z2bEU0lxxVxJzoUjTquWGHHL\r\nTYjCcyakrcB2KRhDL+Ca8Faqndlh5BPBjk284njQ7HA2C0q24LPWtw//kyHi\r\nErxy2IvHaH0d7K/lHgGTZsZcTq8ngnkWLo/4aPnIt8nvpInj5B+Ji6vt+9hv\r\nid2t7hM+9WysPs5+08v8Bsq+PecwvV1D18f+r5WPbOv71hPL1+vQITM7hdof\r\nntkoEhLLzicdJprVobWloVo6otxVTtsPFBk8dpeQF11/Oaj6rSq729877Ixi\r\n9SoVjDd+n49b6rGWVLH1Ex1WaX3DirtneYG+fniO1PW/I8ZYEkq6cjYaIVZU\r\nfKXtVO95wVhxDYQysC6jIG6vj9qwBQtpnUOnGkdafPAvRYbzI+yuDcKEPsEZ\r\n2S7x4sr/WjJDiK6Ryu2RWSZwfP28/jYIK2mAjxtRYqu2z2xIfjplmUL4D/ky\r\nu7V0mU7o46NPK/5M0K0+kYyGlHA1sHC1stXF53KdN0GPKo9ceF2z5jPAAcWO\r\nkToTYzhzewrsOSTFqHNDSMJX9jL9g3Rqcx8=\r\n=0XU7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.8.0-beta.1_1661971198511_0.5348163717313674"},"_hasShrinkwrap":false},"0.8.0-beta.2":{"name":"@slashauth/slashauth-react","version":"0.8.0-beta.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0","zustand":"^4.1.1"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"44dba3983bcbca48a2e6a7eea3dd05cf68269607","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.8.0-beta.2","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-skC+d8uK953BeKTHxO8fwDNBAsgaX8yfIGVF2VuZ+KSdDEGxVOAhv0ZodJOougkmbwwVxfYx0UPX/qJ+c46/gw==","shasum":"3d2ac67121ad6bf783d7597dbbcf192b13bd6d12","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.8.0-beta.2.tgz","fileCount":120,"unpackedSize":3846131,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCU6ALDTW7uHn9yhhlmsMHUEoAqyeEBHxvRT18WwVLDEwIgK0pwfQXxFRSWCtcrnlF/ulRw0ax8Pb/ER4kimn7gTgk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjD660ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkQRAAgACpPg+Y+OEAEzd6s+fEOXrFXe8kwm4rNKjJj4lTKG8uZnlu\r\nQM0hNF1YzMgbMHDghHiRuYo8fdnK1KMisMRDcPIoCZyvaDuXbHal/dlLbMU9\r\nCD/nYox5aaEDx3D/ZX3NpHJ+SIb0oRGo4U68cTsT3/P7LuChQCUkzsdQJAc8\r\n8I86CF6vMkTi1EGTNhtwHMDC0bt2oDAvkHejgCG8fSCIrrTTtJsOq1yIGM0x\r\nK5HdRszddagMWeSopaa895gDGOG3UlbpsUf5afi1azJxp6MHv8n2X5A5kD/5\r\n4Daprv/oJUqT0mCTAhO+YcMLhBzDdnkdODPdyG2yQ24O/dwftsUUn1/OHVAr\r\nUfhsaXTXh33aFMBESL2j6lnJH25xj+KX1SP38j3wf1sSSPcFBkTtjxclG3tJ\r\nBsb7Za4s3AcWZpyulDDgZbpdR+vGPLrfkjhDXF6IfHLnMdjKW9lt0GwcUcyE\r\nRJYmkxR7hRBHQ/g0MHy/vzUAFq8rSTrgOMfq3iKttFtJFSstNvHn1kbXpmml\r\n0mLlI1NDdyZaDFMcdohDsk6Gj+FEkloXZwjj43XiPwxd9YFsvJiJp5Qh4n75\r\nEs+DBrn3SDcSmKsolAIP+XGVkmw5+nrUufr62ArWNZpiGimpZ+aCkUZ9KK8W\r\neg6bAyhHXWCvHVg2nuVMhuPLBtC6JyqB1HQ=\r\n=LlPf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.8.0-beta.2_1661972147746_0.18310574063191165"},"_hasShrinkwrap":false},"0.8.0-beta.3":{"name":"@slashauth/slashauth-react","version":"0.8.0-beta.3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0","zustand":"^4.1.1"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"0b258ab1a3d9edc01c3743d8e2e04c232838ae3e","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.8.0-beta.3","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-DgzGRWq4ZhKZ+WDH4bHEvjkRHlYo8KkADsUSLISKXBkbmWfA0e4cL4VVJ7DDtDzdDuMySHFdAQvoopdfSsDN1w==","shasum":"02d4a1c46b86b66b876ee6e60e63fe2892e34812","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.8.0-beta.3.tgz","fileCount":120,"unpackedSize":3846021,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfE3CHYPBzfg4k561Gmyz3zHpwzgY4Brvb+JrDoX99XAiBzji0IunIeigskDkJ9rht9xf1/nN1bdiuEgqVSejJI1g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjD+B+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaIQ//dIgYYMnTiLcukSMYG+wEKi1ytSeK7zjnAXSI0CsJb/JVs4b7\r\n3ZVGIY13slwEFTgRKMGsaiR/dYk52MTHWIN3EZ7hFRmeqcvmPKIV0cZ7F/l/\r\nJjNRCPDehvnNCP5vdI60JnNg6VnfGR9lx4GhOKgow4A0PFsnuH+Q3c1tHVwI\r\n8YfxN2GnCTbmdntgZn9O0nNXUvbCevXLnqHCYXcLz96CnjSMVtIA4jCL0hKa\r\nU2nTx4G+DR82dulEgIcvIEaMOhMVxygjWngOewmXvUxOKrHiyfKjQYuE7gva\r\nl1rTH/m7iVjMCrrbq6qDlf12wFqNmWDd9qSUOHT60S2iqKIhyNTG0aoAjT43\r\nrGPnmwbAxf39/vpkqjGna6oh5XOJ6Dphxu9lB2ygXNxo4S6yneIRwVaGBfJ4\r\nIRI18uD9n4lRaLcJdhJRqutuQ/BCdpmcXJwb6m6/IRNKMUlBTdpBdj4R43Bo\r\nFDEgde6PnwKw/eEgDzUbCCWlXuJwuPIflwVGhnGMNCi6jCSq5x0oRjdZKMCY\r\new3nrWtixPIzvqBJLV6twpzQUV/PG5dZYd9nrDijprQQ5AD6L8DrctexOpkO\r\nQvaE/QlqjVT3eL5XKLbpbByWnoe6Bu6gZlt4aqMSVP1Vq+Xdo89ve7pD0GZj\r\n8Ydd9+kAfyk6yPI5IySXWzhYd9nzOGaROeg=\r\n=bio8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.8.0-beta.3_1661984894346_0.8029806363379519"},"_hasShrinkwrap":false},"0.8.0-beta.4":{"name":"@slashauth/slashauth-react","version":"0.8.0-beta.4","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0","zustand":"^4.1.1"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"1ecc7d14098aa9382af5c76a231ded6c589e00e7","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.8.0-beta.4","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-I2VRqD25BkZziipiLo/ptgqksIAG9b9EYdsMiSuvP6+Zc/mHeZSw8sYq1RrTnykIiyizTsh7n1PIa+cM7pOaog==","shasum":"caec63adfbcd9b4c5dc45efdf8c82d49caddd0d6","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.8.0-beta.4.tgz","fileCount":120,"unpackedSize":3847425,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGn4O32RTilL/hJhuBAeTH5/Bwp8dQ377NmBQIFySMwUAiEA0PWDQkAYccilatMBR8D2eWW4MnYVGNm8bm31lTY33Ws="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjETKUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodKw//Vr7dId4gwxubifU/pNWxGqLJ833lWhRP7YocpmkFkEL4oNQ5\r\n6pMotEdBdG/y/dETid3rxqPpWXsosTR/CESMGIQnKFPikWGunMd7q8tvuzdD\r\nSDlGnx9l9qKJgwG+6msZmx5UzWC8o4gThzk4dUsmfuX4ekGmLfEwOSq8QFHt\r\np8ztwYpUhedAyLcWAGABf0Ipim+MbEGzlmI3YBeZZg1GJADeLVTBF5v7hjDD\r\njQ8cbY0EnVTN6giAljA/vPdpgZidbSiwt+urLxQzo6RYZOLucsJFNSPGJwYd\r\ndM6HlfYofBNgAZ2AHd2O/LG8abXiSEWaVH/QOTWHuSJg5Wj3nu4gV1LLQJ0+\r\nSi7GW5fxKNrfIDY/Qd70b5/AgtZTKl08YJNBXMUmVkOQ2SsJdIHx7ZoJyA97\r\nGY+LtLPBhNMYQGXCoWAwQJgh6PxEz1HJzgrOjbUGU6F39UKLWebQw82+Dtn0\r\n4GiLObWJvmayYXy9Vjt6j8OFITI099seDxI1OwppRVyBw6yvp4tLXmtuR3iG\r\njyVdTwzlE84ZM2t/VNIg64HrstEIs0gBsk28UrhHRlYd7fpKLWcbw5ZwY+yp\r\nPQvD7sLt2J9LF0TDE8PF78sEdu6W/3esz3Y/Q+TLy9WxQfqNKx+NwWHyJEYS\r\nCDe8WB1hS8B5fkf/7WxIRPH2Nk0l4mfewfo=\r\n=xsLP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.8.0-beta.4_1662071444080_0.1778011736654561"},"_hasShrinkwrap":false},"0.8.0":{"name":"@slashauth/slashauth-react","version":"0.8.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0","zustand":"^4.1.1"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"a955adb13ee3c30b2774b2c63004ae24d0c40bd7","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.8.0","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-4euyjAK84qgxkh5E29bHHC/C3VggPGTVGgYdOw5aHQKCbOEimh9qTlW/lXBTlnSW/RiserSPAF/ctjYUskpmNw==","shasum":"510fa60ba1f7eef1ab5d262594cb5e4e517796bc","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.8.0.tgz","fileCount":120,"unpackedSize":3847418,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGdH6KtTP1Y03pUMbfAecQZDRGPcYFR4dA03TbMDoHTDAiAQbzworCCmPq+ntd/DZuDsV7wwEqbEsrOrQIjKMk7VlA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjETU1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNlw//QgBSTJXb324NJl2EcN11j3ykmGTV5utQRear1FRWXY88bk87\r\nUXKAq6AMzIDeLvTTwpBAfqInBF3a9WqM1W2TOE2lu+Rk4rSuHURpJWiWviIM\r\neL28SBPBSj/v/hmIdIWTJgbd9y9mlkeL2mSVlzHoJC0zuRzL7xBtdtT0edCN\r\nUPe3S7gYeHDUPli3Uqgmy5ElLSXC/TSEIELWalHyF9srYI9W1PqWs9YQYnSz\r\n0XIn+1pmgUxlihpGnwvTB7Dq/o07F9Tcxvk523mcGQILNTlYsjpqHrorZNIo\r\nYo4ey6lGqJ6vq9KybTj6k8KimmsMnxhkJRCOCQKMIRiBuS0VadEHgTfIEEue\r\nrP7SNaMrTuE/zsvFxuc4PhNh30kS3wd0AZvTZ9P/5Q/ydbwQuCfdozX2zdam\r\n1F+Fos1YdCnMfg3NNhzVo/aQprDS5Btfj1svgY6KL/lfh0J1mLPKqdJcD3n5\r\nMD7jLex4F6bVD1dkvbFkFJEaqXAcLmOFlZovyXtS+eKXAeJwkngybxTbWVxR\r\na3r4BIvSk8JYBaMAT0OqDnApjT47Wzq6KoPmFmeKOG+8arC2S0/51pUwm+vv\r\nbOw/HPbGpSDMb+1uvN9TUk0wd2rdm2ScUrz7nXwzUEs2AKWmENcR9f16nc37\r\n3Ca9Pr4p04mIoVnaRnV/JgUoHoVkSm+F7hg=\r\n=NRQi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.8.0_1662072117283_0.30534169590182003"},"_hasShrinkwrap":false},"0.8.1":{"name":"@slashauth/slashauth-react","version":"0.8.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0","zustand":"^4.1.1"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"cfcabb2b0bd3dee2f2f68b51885f130f5bc39569","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.8.1","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-XRWk0rjR6n6qXgFxOur7dlOKmzu8lJX2PWkdou74Q5ShOtQz72ceLxR5zWJtbmXg4dYYcO1bTezuENvvhUwjGw==","shasum":"bc82d9385c2f53fe413f5d131aaeebafd518ec30","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.8.1.tgz","fileCount":120,"unpackedSize":3847352,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHuBAN14NUeOqJq49yPa3Bb9JnSah1vGA/H4LrFxffdQIgE7XI+znkY0KzDay5og9Zg23/4J0Rq6+Pg9aJcl/ta7I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjETspACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3wQ/9HaobJEodnYL0Imcofmmz/hLp566EQeiuUDrlAjzC4aa/jf27\r\n0SnjbO5Qfydj9C3a9jkOoX5EXW8oiqPHD5xTc9KasRuw8GIBuJhd3jrV98Zb\r\n+d32YfXHyNfytB/K3bjTABVTQAZqiwsToEbnJBzHiOgbO+VZ5g4HOa75D6cC\r\nv/ES/MuSIapcq8ctfnmSyrQ/K1GNF3n9knZ6axnJ12+4g86G4WkI6xA+JIj1\r\nDg8osxIIONVuUxDeqZXvCEXyLbJK6Y6MZPCGpl00CLKVL17YZtgy9Fipoj3K\r\ndvu3l15TuuyjzPyelioD+ftq/YjJ5v+/aWRt7zz8EMK5y00AsPlM0ZfzCnun\r\nSyDOlagzcIYerA/+SCiJ3qBgkEL7GwFqPR4YhC7GG7ikwgDaYyD7AyyWAD1Q\r\ntMi+qI3biXR5XP2ZzKTC84GnC5fPOJB2V2KQsaW1O6t7JfOYe/WvjB0xiRAa\r\ngK+rohe0vzP7wqV0k19H9LUM60Nb/dnaQ21Rlj01pm6OoLljrjKaNGGK6Mma\r\n07asyhVf9KjO8frXtzZQIWCq9LKSu+92ERjlaGGZXBBkllgYkfeN0tyBLtOe\r\nYtwSp/5b2Y8CoCEe4wfzZ0Uu6mxGm+EDLh4oFzlrzMZQWM1Y4243ARd1VXt/\r\nCvFyyOZnE56IP9Y06w/lJFIEA7sNTG6mRw8=\r\n=a4N0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.8.1_1662073641112_0.5654626350036633"},"_hasShrinkwrap":false},"0.8.2":{"name":"@slashauth/slashauth-react","version":"0.8.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0","zustand":"^4.1.1"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"2f97bac85ebb2c8d9ffa82a7e4585bc6b456dca4","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.8.2","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-db8SDNhctwfgdfJ/BCvJYSLd/AC/YX0mxTDARng7VkM/LS6r0BrGyH8iwxaRoxcFgOyGTTu7vKj140jbBr2/BQ==","shasum":"839ee73815cac76fde5de184302d697afad215c8","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.8.2.tgz","fileCount":120,"unpackedSize":3848470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEC7ZONSnkRzCzM4XTuA+fnKuJQY5kQ6mQryLjYcuhPHAiEAl1uNUfBP71X8JrIxaOpARbhS4+6grAk1Ns3b2tUmgGE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGPVIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDXA/9EkGnquNRW3UkqJATgXbpk3ArWD/ZGOYporPRyIGOP5dGquIY\r\nMi+lE7j9bDqUaw6ifbASl58GKyGV/tLh2ypntS/eS0COq4bn0aQkvmXiryyT\r\nHI/fF34WPPeZXjFjSMmLR6XRV6xtX9hTHZbNeuhhHCG9ONr33woL+df6j9VJ\r\nRzIxn0M1hR/1zc+XCs3GriOYTTWKVMofbaMam3n+cBZMrwO3dQtec70Lfqk1\r\nkcNHrVMKH5oUxHqL4ZKUfoJyr9rTEyuR+hdJKFyYD4MN6Fd73+dvh4D2LzE9\r\n45bBQH+e9OALD894tnM6GEeyZDcYcNwzLI5S2kEda5GSzhKr5YpPjkHF16lD\r\ntxz4rObJVexsdjtHfZdIvll8MJCjpoNl8hBIZ7TDALBofGery+erYR2o6F6D\r\nmzgOIdVMTpQJAX+3iN72kRJL35wLi/SLsXMKzd2VYmIrbXaU0Par0cNBW5m+\r\nnPVBzpAFg10mLi0XAR9N5noiz8hrP/QeKhCVJdciGj8K8EImWSzeMEQ+0Ldc\r\nYjkklZ1Yauc77AzMcDIDrN2Hmpt8w1veLdJm8lppTmyry/W0eNFZxHOnxctK\r\nY6dB1ju9y3MdgMD97KBNeV0qnIgh+M7NdLacB84sMVKJTNVGB2P2ualuMb72\r\nBVWb8ysqZ/FhkpG3kWREttC9pOZy1eZtBPg=\r\n=W1X0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.8.2_1662580040593_0.18650955938650116"},"_hasShrinkwrap":false},"0.8.4":{"name":"@slashauth/slashauth-react","version":"0.8.4","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@types/react-query":"^1.2.9","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","esbuild":"^0.14.38","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","crypto-browserify":"^3.12.0","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-dom":"^17.0.2","react-query":"4.0.0-beta.23","react-spinners":"^0.13.4","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0","zustand":"^4.1.1"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"f4b20f1486efdf6bb04d522e98fbbb0619d5cbae","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.8.4","_nodeVersion":"16.13.2","_npmVersion":"8.4.1","dist":{"integrity":"sha512-ZjpqDWgS7ccNgQJiGp7r4wZUxGNK+TsiWGcfPoeorqWDmt3CUcFtiuSq+oTh76ZqJvMjfTY2nmfGltjxS/6N3Q==","shasum":"db99d57b6eb1b26c169b88dee3a5306d9c354896","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.8.4.tgz","fileCount":121,"unpackedSize":3848883,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCl7AouI6hfLHjHDNcRgfDf7slw8G6VT8T6ytzQBi687wIhAIjuz8nc/nwGWCLGQlw2S/1c39g0L/1eEd+ddcIgHOiB"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIiY8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1mg//cH8FOP32MOyw0dyeUt1OcQFg+9Pm4+OQhoj2Kc/+NqyGQt+p\r\ny9mRmmW1aFLK/NNj3W1HOQ9mpjPN3cYxhS4gpo7tnu5iL+fCNxpS1jWPzueH\r\nIEEFDJQWD0ftlFAHgKf4wqlHuPjfL61Q1cd4Kh73urGjM5up8Dugpx3vFfWA\r\nGB/YrZn1VBDLtOJKp1ywhOANAeKRySzVdjU04hIn05rndok7zqID8soOIHPm\r\npz1m+6JO9J883EkoArEejlJNp+R/wymyN6vq/H4eQ/UYC2D77lFyxtp8d2Xb\r\nBrD1V/t1Yl8kfe4Z4CnK87sU4rQ5nMe9XKQcLv8ADNxjp3LANe95n17889R7\r\nJ3hCOVhYegVVHNcm+CUplGd6QwOW+DcxYyTH/z9KL0j3LyBq9vctc9t7ma0I\r\n5HeH+O4+WkjJau6KpZXynEqsPwwDWJbKUNuonFOcsYK+rZ3OFxJY06SH+PrR\r\n6NYI5r+uQMM6wA2eabAODtahsanF2swWDDrTk/FLtVeVBS6aUUZKUXRDTe/u\r\nrhVMqkQXGLUh/JLXy49mjOv2uOa9uKwVnf9t3GDtyZ552mzXtRKN3VdOoadX\r\nPhyrOHVS5r6yK+6B97jxQzoOiTSN2i2wq+dKKSIkDKVcgpakQpVqeWwW60hu\r\n4TVcwz1fErxEGR+4FwL3omLMNw/swvU85uE=\r\n=oZVX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.8.4_1663182396659_0.5449986401453379"},"_hasShrinkwrap":false},"0.9.0-beta1":{"name":"@slashauth/slashauth-react","version":"0.9.0-beta1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"db22f9222d90d7b129c02d3d2025296a1bdb2d1f","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.0-beta1","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-jq4edsJutJTDmQSJi5pH1/8Wc3yFXJmKGi69kuNFp60etmv2od4+4FXPAQMOVysQSqoUfznre/hTP8KUpDlKqg==","shasum":"d671adcfd0feeb57f448ae79b60ba0927ed3d2d5","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.0-beta1.tgz","fileCount":103,"unpackedSize":4942337,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGliw/Hz308xF2tQQKuJsFajQ42fGd6CUQPd4xKNGP0GAiEAieOj1udHC5SA/7dkq0VCdzuM8ChRr0YelrmFB2/qwro="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK4/gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmog+A//a/xEOyNONhPge+MNrpxDG3Ln0onNXlWEu0scULE/uTdCDa+s\r\n/wjfNjzu7pr38BPtlUWQTGdOj6FD/FAwunU1+Aic/wpX3SA59GJIVdXAje2k\r\naeYMQpsoZ0KAA5GGRU1/Hm5G3RhNwA9NtsyaH24xQgkWiEBgRQUDDWq5n/i3\r\ntqgBG2NQU6xRwpg6vt22VmfgM7mX0dYPcSI6UTun/kAOcVyAx96cB6H+h8e0\r\nNdLv6/nuFKA+vBOu7sIG7GNXrb52DSBsXFuGsMaWElwVKP4Xbu+BY5GleEzG\r\nRnTXN3rN91tS/bHpuaqE8gcW7UmokJpPGNeIAcxlN/q2aB4Z7XxQuJETzAQG\r\nVcl04nX4boi5fuh06wU9umSw7/lzeA3b9iAkN0ItC9+jiSdsCABLQx/lLgWh\r\nat3FXhCpuEJntcUPOMmO0yRyMy827S4ytMoiwqomcGz9I7vB/sn68FNyKzGu\r\nG0WIj0veU1U6kOuNqTP4ynfmQLGxJQM20tJK+3L4h8wWP+tTq5C01tfou+LR\r\nz9EHEQc9Ms5gy+y8bVtzq+us9eytPO5fvGtOCijNBZhR1NVPI9L+r644xMmL\r\nLL/aXcCESIBXi5N+5+PTa7p9UyNbFlG1vBshc/F9ZmXUdSmctltLItUMr1jD\r\nA4KoEcmQqNDl3eHhuaJvClGV5yRYPAfTME8=\r\n=ZkgX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.0-beta1_1663799264027_0.7390034642633787"},"_hasShrinkwrap":false},"0.9.0-beta2":{"name":"@slashauth/slashauth-react","version":"0.9.0-beta2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"f9a007faa40165c9ab8d37635bd5fdc7b9daf837","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.0-beta2","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-KR1vInsq4ycaEc7HH1qRIaEUl262W2RgksLZ0hqCLYBFrvx46jnbGugSEpmUkeVy9M3wH/ipGLCdNFdjv2rSOg==","shasum":"acf86e77132073652da86bc9c2774dd2c8248653","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.0-beta2.tgz","fileCount":103,"unpackedSize":3277855,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBNaNodrM/qm6Ivt7dqT3UEsInjVcs5qkv0YF5J5DEQgIgZtmpU4WV6c+wHA0CgQDifaREeaywXtGUafDJPWmfj+s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK5NcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowEBAAnmSI85LQWB0zkL3hntkCCZz+XzEByhpF/PMwnUpXSH9IEStj\r\nxBOfk9jg7MoC99oAfIon2gZGhBYLG1JCpqLzSFvcQP+9cwnngKu3+rNs4yKu\r\nDDKjIZ6YkEEERN3/aZKvxEY6u/t/Z1x9LIo2s/yShMEF2QBOMKIh4mnwb845\r\nRwzUb1bEjVSvjiU3j/vn2aKM6FV7T7A8FxpKQqwVsyGT9VZECcsXG0pH/aG8\r\nFbo+0erzJJIssBawQ+5HMpg4AiM6mFbZDzWUN013psrZKAW+ECULJ1YZVynb\r\nVTexus179KEEs1njNPibAqghfwKhMxTuuI5UcWqZ0HtiBu8U7phpz+vm36k7\r\nHQQ6deS+s23yP9cUD7W3ooSu8LjAblQlUAOosHGud7dJQZHsSZ2AEudNeNN/\r\ncDj9uem/YsIp/MSZJgOIlXlzEqRhOQKmd/j0wTcfbpfMVxMgzCZEEIZK++wl\r\nhSRr+eR86WnK/SQZUmQDYDiaIwjzhQgtx4J4Otp0G4Fm0H+PWtGYqFxnacOU\r\nTfpihFMD/kha3bxpJU+9aasfOyxFQdSmzgXnKwhyqMpV5mYrheS7y+BacXVm\r\nFxpMBAFIfB+AWpXcKDPV21hgvQUkz+FVvvX3Zib15cXdey4YcqXPoQqBcZUf\r\nwnyQBsV3FTT+wQ10SbFN10P1OiXcnhv51Ic=\r\n=e2US\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.0-beta2_1663800156310_0.6113832180750516"},"_hasShrinkwrap":false},"0.9.0-beta3":{"name":"@slashauth/slashauth-react","version":"0.9.0-beta3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"8e50d00d2b977232cec79c356edd5fbac2ddaabb","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.0-beta3","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-B+OKXKdnPG0JDDBOdzooutzESToLjiSQxYQBmrf38kIm2G2NICjXBEev4Y+s7hGWEvy3nfup/GhUuq1OJbzH0A==","shasum":"63338e1b67fdadabf632b2beaa67fb32788484f2","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.0-beta3.tgz","fileCount":104,"unpackedSize":3281493,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCAC0VPpGIcryqkpM/PS0J12dODRhBiDiftwb1pJgV0AIhAJgo9+FavrOSz71K6mByEw06umkUvAZ88qTh3uDiM5ie"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK6whACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpT7g/9FTFOg6e/FMy9i9LpSVKZGDZtk/cfmbp3Gd/x3rpMaJyMzpN8\r\nADrEugYE2UJyqkNLBEA2gK1LAzIfg9sv3YFytyLm3+PW29odgjtgDX97pZ3h\r\nmv3wdwQ/wLZxCYdgEv5JS7koKC4mFDeTbhGg7svFU7SvccXNd6Jdmk7s5KLL\r\n87I8o5XQf+OHXT0tT3LI9/xIADJptyrJ8ra1++C0bd3w74OH0EcitWEY9g0X\r\nF/b8pe+v3JUxhTGp7FXNAeVSrpcG+qaQIiLdQ4johxonmqmPt1Z2KtU06FZL\r\nwu9vgwtYoSHCPxrcYOLowxDn7NRwOQecz+Ypm7iEwVilW7JPi3BHf6BW1rL+\r\nTYG182/1tJziaN+LPeTnZPBIbltg0Y0DSGJhGSsFXHfgadoVY/M9CCYW9V3A\r\nm+7CRCVtk1EcqXgl7fo0XNIfO5txLLzHCj4RZE1nSWSoLy7vaP03i6ZjHrfL\r\nIwAavU85Tt15giRG3doOVdDY8opGIj2Nw6wVoljGUi/y6jmv90gOBWVh8LyK\r\n5D8waSVFMI4OWgwBkpCsI51xBqoKHWh68LhgJ5kk5iCnpJkmymqfK64FS0BD\r\nzdxFs9xNBaGSui4piPW48Y6894p+nkDriHP+xaRd0bOCWAlZDCFdYnNmvog1\r\n3NI7JaBzg5hgQkZqP82jZFSUFmMV9TCvB74=\r\n=P7ib\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.0-beta3_1663806497703_0.1425425943694596"},"_hasShrinkwrap":false},"0.9.0-beta4":{"name":"@slashauth/slashauth-react","version":"0.9.0-beta4","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"f36361a068c919cca17a0d920dcf689ae45577e1","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.0-beta4","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-9JI7sktCg9sCRXy7xhGnGBulBtc8l/UerFUtyElgsVMNJQboZd38KDQ+incbWfzDYn9gImc+fBfSyMym4DGoBg==","shasum":"cfb3794bdf4ed6239e0a10aa3e61c0aae09d8c33","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.0-beta4.tgz","fileCount":154,"unpackedSize":3331647,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOweATzgquet/8LG0PIXK0tr0G9ap3/x9JxQlw/8uRZAiEAue9h0dC51eG8g4I8YKMdp0+ELk0CLEy3JXtYRphXUDI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLJaNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN2g//T8xeCgiFE2HqqyiU7tTchKSJUZ/8pfpeMVnxxjRT8sW7lwU6\r\nNdtG5+F2p0+aPD6WTQNdznyGpH9EaHEjtDeeCNP9oSLSTPsamew8P7pJtStJ\r\ncKr2xA5sABKodYlidEkyhuMCosfMb6l3f0Sfj4wg2006DpX29Au2H6+ZV7Tt\r\n/ba4oWaeflz8wsBpYtczYCAje/xlvshN5t46PJLkbF3vs5Eex/kWFZ7M/L3g\r\nvR+PxzFNBdGkvofXvY6Ttg9s/DdzWrGfuLX0fd/ZkBIf+yp1wd4Fs/gQTTty\r\nx00TGRvAly2gyTdLFdDco4LYBgETTQhe4X9kgW1pDrbJKrR2lw52v63zpPms\r\nKnOixbSt4TZb88cBnUd4662SVBcHAu6T1ycD2h9qnUGVvXHf0iRXEwr0xbTe\r\nWdZwCAy4z9d6ytApcW4H7qMVNdwW7KAqBDryDVv1wwykWQc2/gF7svdbgCOL\r\nUkXhTfnxzbd3wi4mNhnOe0ECjjiCf1+2YWgDpbo+0ooWsuU9BQWpfGGDWHZV\r\ntKa/1vjE5zYlVmIbcXCEdV3eqs/bys7BxCMelkUB9zL4RUuaqszBr/amVG2e\r\naIu2DtKx8SYj6Uxl5xeeUk2MrOP5wUu/VhD8IJHXJTeK9xvvdjyjxShls4kW\r\nXa3dn0lWKii18YO7O2+0kT6QTVhTNNWlYYI=\r\n=Dm20\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.0-beta4_1663866508998_0.4433197002385594"},"_hasShrinkwrap":false},"0.9.0-beta5":{"name":"@slashauth/slashauth-react","version":"0.9.0-beta5","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch & tsc-watch --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"84ab7af89e456d5a1087bc36832b738606015e33","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.0-beta5","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Yjm6hAQnie2ml5rhnqLEtwl05ImIezvcVJddRYoY36Juih7CbQz/jQoHLmNex0KXn3egmFiHUVfij995o6jLTQ==","shasum":"a8ae4f99b45845cd4547a03811bc8ff6215899a1","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.0-beta5.tgz","fileCount":155,"unpackedSize":5000059,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBUacUTvtJpKWJ/tv/K/Fkbv1juSNExvL/Yy1d04ZBQAiByCbZvVTkwkDfdfDDx6Irq8RQQb6KaV0QxX0HIUB8ouQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLM7mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbaQ//cVKPksprARZEHvYOBs6tY854Ea26bxEn68OrfQvorSu3sFzs\r\nkI1T8Pxl5kPPHGF0Rhx+hY0IXihjPf2gc8oO73Zyez5HAtI3qz0vGH7W5BLT\r\nh+deoJXBAl0vfuLRrEZncZYFmUt9LptkA9BV/qU6QURT5/p0eoy9YU706A7Y\r\ni6umF2V1SQsqY94VlB4Nknb5mFXxqZsHnItiml2mf1XjEB0dYCPzh73J3Tj7\r\n7Q6uKZ5ZF8vp5VUg8LCfUlndL5ZzJqEEMOusIp48IzIK+jDkDLfdXu4FPQqS\r\nOJcmJs35hd+0niTgJVn6jU2gfqZkBxNRvqs6VD8HQ026+dA6+m+HHESGqArk\r\nGuB9zN3sA5wNVwSBDW6nPtglpfQX8EKivcV6WkBaF9ScLJL9H70vCLcyDUvA\r\n/SvsiRB/Osz4mBqr6L8W37OtQ2iweNc2/Jx9epwS9zI9we7u75KkQVm/Su1R\r\nQOSyxKjlX4viPCG9ydLduG0u/R1XJci+N7eKCDa3+Dcmxwqf4ygYUSAAWDf7\r\n5QXopL5ipbTGKO6Sv9hr7Rtaznm434c4IMBBklz3qWRwPfUq9vcHWFJIbNBx\r\njpUFiW2SN2Za8WMZwZocaFIy0iNZZRwLVA/KGF5Pkk+K9dmPJuzSN8o9e6jE\r\n1ZCtXi3HlFtr7N/gzQJh15OKkRjGL+1kMnc=\r\n=FNn7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.0-beta5_1663880933739_0.924152406566201"},"_hasShrinkwrap":false},"0.9.0":{"name":"@slashauth/slashauth-react","version":"0.9.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch & tsc-watch --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"db1f49fd83470e109c81c73a9d573f2082e4e2a6","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.0","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-BlHt5vAKb3Sde2qYOou+uOpuBH+kCVy8MokomlYPlTekrBXF7uRGW3N/oZJCSxzIjqRuKYa46iT99cGfDqXCmA==","shasum":"4d2ad1741c210cd07b34fff212f78795c07448d0","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.0.tgz","fileCount":155,"unpackedSize":3331937,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG7t9l62vpGRBdczIEcLfWJhJav8Dh9Vty9IWau8bnI9AiEA3vAVhG1CtoTyL0ECFxBwvXEQMGgkwf4ojXJwaaLnblQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLN0WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7cxAAiJ7gW62x4wpxeAXGlumB8Cqm2UXlXhwZHx1NVPTxvVVg7bgI\r\nTYLslPDj1ke4euyxPiQ2e8NRAtjrfQmVReMmrd2nRh29JYFuKXnl6a1TJSeJ\r\nmWOvL8Ra4CEe+20yJoTGUhh8mtlw2C3JvsvB+oD9QUpO8cpd9J+WGVONqRrR\r\nD9P5BRlrnG43WZQcnOgdSe/hxKYjeBEfPdz/vudkXI7vawc3ZQyKabfnKXHb\r\nFvGrnlYF5WtjABLP0YMofLS+iuY+icUAvzyxsidxK/UrsucDOoV8tPoBXktj\r\ncZ594zRAJQalATWxh/AxbrjbHu5QiMzAXhSMc2EylUh+v/Mkhtuq8jwuH6jw\r\nEdoamLR9jGgi25DhMOyfN/w3/lSh5JZZzvgJbzuqC2ar8Xo9bNy1OQPpIrCN\r\n3NmNnK1G1ugZRx055b++qoTtNLlPm4GrCxWdI3+/+wEP8sIOkLeqBsZ+90B9\r\ngB+tTdt9e2OXSSPnKtkj587r9lEeqSOhWLcB+NhuoSlhmRxnBQcefuy7L5z/\r\nW03clgf7ZoPpkJySe991+C96tb3nT+TWW+p92y4a7qDf1nuqPtqhNaTfETA/\r\n/jiym24DXQddKX/Uq71YDdmuF0GDeHUKne9LHup7SteUqkRWU29PHWoO+FA9\r\nD+3AVFV4Fzgw5KZVRFJNJsuMHIwU7pwkl/Y=\r\n=gSFn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.0_1663884566592_0.9727995697105394"},"_hasShrinkwrap":false},"0.9.1-beta.1":{"name":"@slashauth/slashauth-react","version":"0.9.1-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch & tsc-watch --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@wagmi/core":"^0.5.0","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","ethers":"^5.6.9","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"41b7f23cf8aa15ff9cad7df434976160441837c5","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.1-beta.1","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-se1+n9GjE/vDTX9q0Y4LDAm3//cmgmCzhUGpHYr06jDoB+qh2dmkMoEOaL0KZH3g3Lk5+a4K+ZsyoEQl8HFlYw==","shasum":"256fa3882697c3bb0feed088d09f1dbb203b1ecf","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.1-beta.1.tgz","fileCount":161,"unpackedSize":3387756,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzU6zyM7Dy/9P2XTgjNhb2u1L1wUHVNT64JcwW9Fly9AiEAnONwMyfOWuj19QoZ0MW3Kh7N9RNnkrnvyyBAWlvTA9o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLTbkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRvg//XqpRbWBTKjLnj4uuc9kwQwrdT2PtbcB0WUq/G9nKlvwuuLdj\r\nUZeg/sV3Hc5GTQWnmUzn+OvIxGwpbcRYHp5ggpbgVwgJu30CLvLvIhD8ofMV\r\naQ2gavoLU5RLbZwCHzVK5Hc5hO6r/olnqEMUwJg4TSDarBz8JGfW15SQODYx\r\nw7Rhk3g07orUvTmwlsUemymJVvNfqmv8m7ZOTF1yJzpjtciGjmypUzFxmLBD\r\n+6B6pKSb/BlcNgvjq47cgw2HRi2YDpgpLuXQDmnCCDMB+GpYJGgaIjtF/9rw\r\n+umezYsdJg2ro75eRoMuWKps9L5K0T/IyPTP7DwAfkLg0h9odt60zw1I/l3G\r\nzYscgZeTbATHnCLuRRJLpi/ATNtDI923ZvP+bs+9EZDVps3tJc2aF/Ou2+yB\r\nbFA6iP/a9UQgiogYUJA6urXe13C2kqtu3Rhnghaf/0TGttN/nKxNovtTUlTA\r\nqc38wF55qkKte9wUHKtN7Wz1GVExRPO4So5Ef6uu0zwQdzA6OhU8hkxVXhhM\r\nMzPfK7pq7eHkYD97LHRiIzSKVc8xL2p4/KHMvfTT9PlACjtwnAdBxgDIfBzp\r\nTDS0IBOUMWsReaqCMYh0Cr5fTKTZuxXgk+a/Z6EzmmzXmKiVn1LAsPS98TIf\r\n55Jc2u7plsKvCXhbVhCy2sla2+A+JcR7SlA=\r\n=L4HA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.1-beta.1_1663907556651_0.8454287585388585"},"_hasShrinkwrap":false},"0.9.1-alpha.1":{"name":"@slashauth/slashauth-react","version":"0.9.1-alpha.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc--emitDeclarationOnly --outDir dist","typegen:watch":"tsc-watch --emitDeclarationOnly --outDir dist","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src"},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"d7b37e4055d7a0e713bc283c6840b9803a24b0cd","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.1-alpha.1","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-vsuxVQXQDwbCNvxrFbek/Q332MEKHRUxNKrPg6mXUK7sJZ5J63Ohs9YhcxakbTQDyS5AFjRrBiiK0tvodrvUAA==","shasum":"aaf7559d4f7207e07c84eb2cb7ece27104287ce7","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.1-alpha.1.tgz","fileCount":161,"unpackedSize":2009898,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIByhn/MX+cYNyalf6L9WwjPrgQlBTgwO7YcM2oIPdPDEAiAGCYlcATcl10CZMbxgFxxsqJIvrbTSmBDT0Stg2hcXig=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLdlsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8vBAAkiY6QV3ASo8hNfPewFX0fyeVrcDkjYTAx1M6o8eeZLr+sTjW\r\nIaJJv0SnaT955DA8kBBMAT8v8FQoM5/4f0U2i6PUO5qaM3DwfDzGWjvwLjC0\r\nSw39FGBjDBBc0Osz5Sjsf5xbuDykBEfgG3uLInzQl7Zzct/QJslGNF0FejJc\r\nz6YEhZ5xkJeK7pR6uZi+N4V8hErRbA3G4vVbNaYOOuZk888nTFDeAwRpX/4s\r\nU9VmG9T2T9POba+4yAew/ePevy3VKlplI5B7G9oxca897PoltOlbUXZ+V1tG\r\n63y+zuPpeimRR+rXHc27i5J3WjjEGw28fv9175Ba5Hwp3bQA8zo8C8kT2z+j\r\nB164L5A76qfsqM7ta9MYw/Cv6QmHiqMOTaSxyVIywyGyDoMS0tUFwvXlf30B\r\n7axCUT1vRNfg5+cKusDMZWt/qxxLVKawc/lgsYbDahQTPplLS4vrnx9CgGF0\r\nREsNnqSDxbtSvQV3Sr9VOdN1X5f6T9o5jKQZ4QTsEKJeJIGG2YnQSeGwVpI4\r\n+kN/tR5c4m7Eg7St/hK3Ag8JTe7XI/YOAPi0C0nWdoOSa7NGYiCQQ5GjQg0m\r\nYbBNZb75mxmtjJ7LY8gZ6aKrZSgQIjZjH2i7uC4eAMQ6JLsxwS02Tvn3NN9M\r\nzf7XfBdvHkrD3b0ThxQCNvZLwRLKXOqC06U=\r\n=Q9Iq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.1-alpha.1_1663949164637_0.8386952789244617"},"_hasShrinkwrap":false},"0.9.1-beta.2":{"name":"@slashauth/slashauth-react","version":"0.9.1-beta.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react using NPM:\n\n`npm i --save @slashauth/slashauth-react`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"d7b37e4055d7a0e713bc283c6840b9803a24b0cd","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.1-beta.2","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-j7lwc4zcdXjZDniL34Kf//BzkWZ08kZeUDRN3DZIhYTUYJ2GH4GHFH74h2zHOsP2jUQ4z9CKKbf4tlUZ0vOwfA==","shasum":"a11e96a6c55f2b458f00042c223cbdd60af22b31","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.1-beta.2.tgz","fileCount":161,"unpackedSize":2010051,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmvPJPqN7izypVScp/Lyu+jR5DU8sulYpCQOURnP4O4AiEAthXzIV4sCA9RIogsNJn62kA7vjH1R2CTuYG1P0gx/wI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLfQTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbLg/9HL0etQ9W/LPKGp6zoOGtHcmB49ZjkEffcwlFMHn0uEEq9kla\r\nyj4pDkQdDjAwmi5oFO353Re45FjHdDSWunKoe7N6F+/xe4GRW+A2kbqC85nM\r\nF7kHBhl7B7121cTeglVv00/6RR4mdsa5pnmEvQ/UZ2DcokBmXYP17bm2ab4c\r\nwt2DfYrhRONm3g484KF/zRpwKx0phhvWm1jYvPhACPmvwrp+jfNgu0SVY964\r\n8fLuWlau7SPJQVLdp5SNL7tTBuEVa9QW6Zr/Z98GMub4E7vMJstyjOuyP5n4\r\nFy6/y/UopUqJgGWxkRj7kUFMHgBQmuf3vPc+PeIFxA+qPFIeRsaRkF3L/vTR\r\nNRKnZi04CYxEX1YTNoZPCu0Du12GZVPyHNYG/bMGmH5tCKW6uGYJFxineDwd\r\n4Z4UQCimTl9sBPeljKMnKZkYaGknK/i5JINDgdNHpx2FzLM3SS5y9rSJ6Gv9\r\n+ZDzc5NiqJ2JdJ8WGDmNpArAvaq/h9gFKbrjWjWf0Sp+QEjbx3beUBkcBIiy\r\nVXjyrjAGp2rtVe4mdO2gofyFXojjkqMTqEvMgrzWHy/Lfo1/LmSsctoJvpjH\r\ny2OSkdt1uelHbmmUI12O8qsS+JtYFBrzd6gTA+ODGk149hDP4Im5uBqQUTXT\r\nbvyaaoKuwx3d7l2N45C1hy6Rlx7ta/WptcY=\r\n=ZJbw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.1-beta.2_1663955987110_0.873154655247717"},"_hasShrinkwrap":false},"0.9.1-beta.3":{"name":"@slashauth/slashauth-react","version":"0.9.1-beta.3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"4e2b941b5a7bc39991cf6d0d7de7ad07ec37ab5b","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.1-beta.3","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-F73QnQAbDK2NOivMUB7kPlRXMO5ndmB+wENK/yFyelc4i0uBC+eePxQfBV0lvNJnmIN1K4lpbtOBhY4xdzC5Zw==","shasum":"c4ea76f5f2e916b23fe3ff248262051551d7d3d0","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.1-beta.3.tgz","fileCount":161,"unpackedSize":2011137,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSk+m+njPsqUi+10WqpW/ZCwzKxThFMmDdP8Fi+CemwwIhAPtDoFmvOcZIU0e9Gh0nngH2f0cAeSXJQGqV8QEZ0eNU"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLiglACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpq+A/9EL4PLArdJhnsqdhnJ7h1E889V0Miw4BDokfowvQuS4+9Ur4S\r\nbdVzhHjuxxIBLl5OT9FCEw0r1FGp2ptxZMiprvXDJ5kGKCX4ZvZPsoVuUaRA\r\nkwHqhT9dFKSaesjbOWMET7quSxAWviyvWSy970KzuK9iXE2pLK+Ct5CUGp65\r\nQIoVWbVB8j8ObojjpBp2qswsNanOC8xFGKQ66kNJcIMJ7nNfKDgPeq8lj5S/\r\nF8Qz1DcqL08lDQVmABEkEUBqY51xp9a1RqL/cYV7upWh/zqo6HnwuyHHgOLb\r\nqYKDwgNmuLtG+CtVhRQMMDnplnM5lEx11szAz/dbxf87lrtP3sTp7LuS5aB4\r\n3BlDLPdnBgGTU5Bt9FxAnsiBkb3TrqEW1ChLE/su3UyCizlzOJ1/7Rt4fwTW\r\nHi95NtmeyMkY2bMMOd7uFV0jrCMpNkvZKvfaqxERHgW4nasMe95k7jvgpop+\r\n1U1molj4psFsiek+TJSRWgL1j7YjJSYNnHlAxlNnF+bbCqnx69K30+8Myb1Y\r\nYkgqKZTjuvecWQd8KdB0XG/0EVgJbnkLl5ZeFvTBzwmnlH0JIazFyN1QgGqg\r\nUZWoezaXH4VToxn6UMni8aA7Pqhy78X9F/c2SwnSeJv4/WyK/ylc0EHpVYQ4\r\nG2kqChkeDdZ1S3/V1ojyqwMSSZmKNQLz/LY=\r\n=ZSpa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.1-beta.3_1663969317318_0.649472095037581"},"_hasShrinkwrap":false},"0.9.1-beta.4":{"name":"@slashauth/slashauth-react","version":"0.9.1-beta.4","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"4e2b941b5a7bc39991cf6d0d7de7ad07ec37ab5b","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.1-beta.4","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-KduAbSDIyMf/Y9kAdiHPK3FGTsqzcGwAkbGrOjXlz4MAoB7OsOhbvcsXh99B2tsMa5iQksMPlPQ8Hk7nV/JsgQ==","shasum":"351988f614f239ead59ccb7d7ea32d1ede659a8f","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.1-beta.4.tgz","fileCount":161,"unpackedSize":2011069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSzQyrfdHklZIOoSdhnjrdDXM/g1AQJGS1NaiJDomKxgIgA49iwUD47RXsLPi3DXK3sTTriC7/KQrF0FHGo1YYg/w="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLilxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpprQ//Vb6Hzdj+DLldQZ0m2a913Y6GarqEc9n5loU2/lDqkoPYpIAt\r\nxb0dy9iKnAluTBuKuGbS31dsDYdYpKtSM9mEpNrXZvC7Ot9vBhC1zf91BhbF\r\nL02HfipWR3hJT/WVmHE0UptugZTedjuyPYipxi+uYvUn1iktgS4S7KszFqJh\r\nqbELA9dPFzoKB2nkE54isaM1eTUeWKXDfjJ2glv8vvttEGXdM5SpQcDzmZuR\r\nXW+k5vsQ/QYaasM20BlkwBj5Q+BPCB8KHbLknKtJpjyqQfPy0Kb+EN0NNE/t\r\n94q0Z8sy+4gF1SZ4//uOG79DT+Okvbbxi+J9zo/Vdw4apKVht2DgYGnK96Q2\r\nNLkLI2TiX46x0OkyCp5E12UY8Q+k42QDVhdMwYAyfqcAus6ofxMaRRh5KuUY\r\ng60/VZxBCAzECdrEJXoAVGzFBChB27B0BgrTt9g06qVMD8YlJqyp3IDpGQQY\r\nfGwqzaINiYq7B0gMFM+DCAy1oLP+hjTyvzV3wdU2RJrxeBmq8PJkHebRb23C\r\ntji7al5mTV7ZC7RIc6JUF6mqUjbu2IrtlB7H6oEu9Rpn1s96ioEa2XPsxxNW\r\nWypT9mKk1iACRnUVRP/sC4pm94KuStJmHtAl7xJjP3UEgkDCKs6veN9W2OPA\r\nvWmKYFEAS9083yFNa4B1rfN10gi57/I90CM=\r\n=jexg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.1-beta.4_1663969649254_0.020489493153083904"},"_hasShrinkwrap":false},"0.9.1":{"name":"@slashauth/slashauth-react","version":"0.9.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"e3f651aab31f9d753756fef48df89a670a21082f","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.1","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-JOTNgWPiijl/r4kylybSTYYTxT3NqUrINAmjge5B8mltuaMc+kPMZWjLV16zn3YiUpCMHouj3Cg0EFbabXJPaQ==","shasum":"150a37875e3fb725c474c5a00d25fbe9deb5e946","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.1.tgz","fileCount":161,"unpackedSize":2011062,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC0MlJ31EMOSFSk/QUhtXjplS5nF2vXVz84zD6FVUqY5AiA60zSIvvG8qSpOA74O3R2Ikt8iHNmsfW5MY8LZLKmhgQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLjR0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpuA/+PsweL73Kb8/DzhpyPhGr1g84/5UmqhoAPb9v+a18RV31cxbi\r\n80iYCN/7tYI2PPEqrUrzNvWDdTpL7u9WJHeyGsB65i0KRWub1reRFQnAs4rp\r\nFmOdyjOL59D6jTahkdYmqKMxySNGgIKwUp+y59liex9nGw5bjGFenD89wGKX\r\n3JUptjffEc1ANQrdFBcI9CMd+XMl0o0krK5hQJaQupTb+z2fVdj/9IEofElj\r\nP03JfZ+pGXxFGm3gY7tpvNaKumPSZL8nHjpUjNb8Ha3F0hQAVppIdyLJRzgx\r\nB4+PK1hRKJekO0xsNQANynZ4RRKgZj1n7xOuyu6xeHxEkWCBISSFeNDJ7A9b\r\nUSxvUqDfH7ePb4uH+qtJ78yHpGoze3bLUDGMT2xyYs9i/xRBTqZGBUmxvvfD\r\nVSwn/pAia7TaaAwwcVjKOSOfX0SMEG9jZqDI3d7Ea7xjgiIKufX6Hu4xHxxB\r\nZ2k6CAa6tKPd2LpJxh8LmNAdmGunEL4MG2pR7vvsF4MWEeWpKDU+kSq2acrt\r\nqdqBswu9O2JwDb3nZzO5Ea0AdMB5MqmsJ/MkGrAEo3c9dUo2gddbOR7POOM8\r\ni3/1UMkjaWNGoNLLFUb0akvj6YOGTAw+h3r3jyEqrdaaP/11af4X4bHgzqSI\r\nolTDYBWuQHikDf8sZAOqWijo9N7QkYjIbCs=\r\n=dBPp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.1_1663972468183_0.7121730063876361"},"_hasShrinkwrap":false},"0.9.2-beta.1":{"name":"@slashauth/slashauth-react","version":"0.9.2-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"734ebe6b1acdf12635839d7dd9712a7f2f7636f5","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.2-beta.1","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-l+qh1wpS7h39P5Ydgayc2LmRjekLmeMtr28jrhTF+giFArF4+UtnmrOqKRc052gjCnuvlYm5QE9hGICEjFrquA==","shasum":"0b975cb8f1c000a12a2befaff214757c1f35fb2f","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.2-beta.1.tgz","fileCount":171,"unpackedSize":2035030,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4RHV1WsvrB4nfgqtNXQ4fsmpFNQcc6e2ojxjf2CntIAiEAp2BLt/ZP6AHbtk4ZEgdKJxBUjrPLBjQJ3Uc2kj3iRR0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJ+/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpL7A//Wt4TXu2Qj/rNGaEdClKgBmLv9/EGqsQT0pKrD4fPMjSOy8Sz\r\nTYZYugbL86YBh+T2VSdyJn+tXD2FRcJ3Cn3KMrrGMqgNw5FYbPe9CpOTyVTJ\r\nPSOUoN8pLMAfLxIY2xmyNqO7e4hhK9zIPHkVTdH+YfCSnu6LUDmHPsUMYc37\r\nNKfT+C8tDtVzkZUf1RGDKD9rMvwyB8ureRA8jlRZ61arNJm4H+wQQp4cjIob\r\nhpF+1DIh0stiRXCpbX5rRrMpvONthAiWRI89yg/H6tu0+CMX0t1PhnthhsOV\r\nRwZtebEkQUVM1cOAT5CS5bkHpioccWOI6AITDk3CCBamwbVRpb4GlV6nwgue\r\ncwixh/0+s2ZnNOKrXpwFHYD/dOaiuia54ZeF/hjci/66CXPC/jtkQ+T+sFY1\r\nWSGUMcfPgvOmhXVvuYpvtyFIKkym7dPPaBApziaLfguPHCTf4ZGhVGddA/Eu\r\nmJsqWvL95eSXXCj/xxnbeuJqUTNQV1tOoz4wqZAb29142vke0seM85ue8MRe\r\nvVq4z1/Br8/v4kSjQLUwI7THwteZUO4tIvcJhCvTu0hf6VUaYDmQyEIejtJy\r\nOmHZagRPWvNhvspcoUkE4brhWctVjccnd42ac+Bt6hpS4WDye6hfiZvr+NaC\r\nto8Ovk/LlWLhOyBq/ggsj1VcN06niZAqkaM=\r\n=632M\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.2-beta.1_1664393151421_0.6859236365587842"},"_hasShrinkwrap":false},"0.9.2-beta.2":{"name":"@slashauth/slashauth-react","version":"0.9.2-beta.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"25d02055c29e299d84d4ff8c88de93db320cfcd3","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.2-beta.2","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-6HsPHOXYiymiylGgqmX5O/38zm6Nx+aJZbcs6iJ8SNdqXYTPJ2r7ncf+VYu4D+N1p2Vho5y/6s/M1b5Q2OVI+w==","shasum":"6b1a8c8f03930dae27b33d0e9bb319abbf12c978","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.2-beta.2.tgz","fileCount":172,"unpackedSize":2042029,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtKacZD17IhYHW5x5fOYn6ziJWtvktG99Fkk+Sfk0iwgIgWPz1D+YxaSDt6gKwe6p9GiU/MyFT+8OWMJhLbM4eUE8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPN7ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokCg/+NMRQ1jX8zqqFUxcrNjYA4tFBgV6TY1XQzBYFsbZ2q8hrf/eb\r\nr7hTnphXxutgvZGC6WLxQ9qkIPxoJC0Q0qVzSuNOJaLlJPZJUI5Qie3bTob3\r\nAjGDp1kdm8M4JQAK+ipW2nOnvLfGnQ7B1VcQq2nQn+dd6Eila0pt1Hggh2zq\r\nlNomrs9s6TaGjoqVbzbOgCw6mPVzL29W0jRky9MmGJFRlccPcrKlL/9LVN0G\r\nE5p/zz0KmkMK4+CCHC87+cBv9pxI73Nd/B3qoOfJKjJ2VBiUnHq+u7gd4iZT\r\njQRPxNADoGYIl/PvdAVABbXftp90iKdyZWPoSPJr1kWxKqdHOJKCozJraunX\r\n45fbV0wta/cb3htx0+6CvYdkEbYtYcP8D/sD0KNIpgpYCCrQgBVsuwFFpcNg\r\nt2lTjw8WGo4JmDKS7SUfvL9/w2mtMbPi5Ld3I/L2UoFrGb1ScfRs8x6otV5J\r\nSM8laRHM4uULpqCIb+upHKXyXIhhn8btaGhbI6Rn9RWm679JJNeNS9JZ9uxU\r\nCCT+OLFym7rpFDsBuHFqKX2JMPpBMyK8tGVFJU7SUQ/l90l+3K3MLprAasHC\r\nfH+HoXjG+mMsoqiZrNXqHkbwbmKF27gRgHX6/B7lxZOvLYIJbLgAWlvVUZEZ\r\n53Pu2QrXst2XJI3B5QM1KspnWNT3jEGmcA8=\r\n=x0mV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.2-beta.2_1664933593412_0.7321642400896649"},"_hasShrinkwrap":false},"0.9.3-beta1":{"name":"@slashauth/slashauth-react","version":"0.9.3-beta1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"e58a7c6fcc3b221f1761df3c10ce27addf89a017","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.3-beta1","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-D9DiRW6Yrxv3W/6M3UQiwlZQG6j5edFG8qfIhON5+C3tFDs1un93N/6VVWBbz4okbXrpeasZr7knNeEI1xNFrw==","shasum":"1f13f7362c51949936a0ef2bab3036435f840823","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.3-beta1.tgz","fileCount":187,"unpackedSize":8493743,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1G67rviwxLwoKU8TGW+CSEi7ONi9OCLsMlYP8w4+uuAIgTNl4/4hoIuNrdwx0NTOLLxJ8GkpIpotGY9wzBzTeiXE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPQx9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpesw/+LoJ5zl6SfWpDbFHFw8l60vLVXzKZ5/HZTeg4cjpSiIHqDv93\r\nudr42z/XF10EfZozZsgFFHTBWP3DLl5xWj1T32OOiIWYtsT/8flWwbtJWAHA\r\nvgv+li+IGT7JAn+K9lBG6hVakWji1W8LQUNhvwlrp5o+JDWxKpDeyPsAjTix\r\n9aMhivWsnCAjxw8oFcBiC2SxaZ/MOqnx0nMt+zmPEgz2jNk2wXJQANTqWjoi\r\n0A5o9H55vjEi52xlkzb/pfYMJpuzVaOgxEd3IvdSVClj5IJoWoDbg+kyFqay\r\njd5PR6MSen0TsBU7P1Xzr50m16KhKIYZGLjnbS1+K96IjiGK1IlGa8Ait1Cu\r\nuy7HEG6D3vpSUCOTNWQ3wQQzT5bCLbEBn0zh3vAKKVgMtDiQdx0XEtHUqFHP\r\nEpup/1JSV+U8G+a6veP2eYi0wC+PNVQ1RADboRfleikERc8UkkGHZ9UhWEJ8\r\n55XORw7dRf8vrSWY7KsHrDckSFBTFiWLDkx6N6gYiduawoigJ7p4cpbE+Wty\r\ndmLF583lDqzepFIh+DOTWkWj34zyICU+hVgqC3WyVCS01OV6Xe2p5a/FcDfV\r\nTgDpwDp6zPbCPipL11AMSZgT0NFItfJQ5zqjby332TK9lfXaqxfCeWYJ+OMo\r\nkJ46wOsfGk+eql5c4Nnb9Y0sX9qssaA6tPI=\r\n=SG1E\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.3-beta1_1664945277666_0.0975743085714531"},"_hasShrinkwrap":false},"0.9.2-beta.3":{"name":"@slashauth/slashauth-react","version":"0.9.2-beta.3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"ab56eb06e05f283754771d7915f5710c9827f07e","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.2-beta.3","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-t/45wk8b8X83UWefNqY8rWNqgp+kjX5cNTKoFzS3Foh9cP8bbsDkL/WrhjXcTU12AyHyzvwZzvgV5y4Phu8wHg==","shasum":"36c3d3da99f05af11b9999a71e2582732a05b4b5","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.2-beta.3.tgz","fileCount":172,"unpackedSize":2042089,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIfMjSnU/2lT/B7jVrvYQNly3Ds7DnNxUlqUc9XKS6swIhAIbDRjniEZSktRgsZlreVGAJHPTj9miNa6Cjkf0imP3b"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPgiYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpU5g//Tml3OtIv83TjfS3txxgW6/4dSObiKNN0RuiZO7r5ljqDzziT\r\nLUAD1W+gUnPfsPlRoF+1mi+TckArKhTyWUWphrg56C0nm3QYzEPEqX65sUsa\r\n1H9Vw/uyoPW5AMa0NjLY0DpydZaE3TIywXhiT1HB+vcnbztBhIBfLtEMWQ3E\r\nYvOoA8aIP95wT/S1vutE7HsfuGXvyLMmtAGnWn+Mqwvr9aoCBVnnGV7ikeRV\r\nEUysm4vrC7QXM8FFeJCr9OM+5HiE/92CFt+nPjJREo1npUFofN06JDHpHejL\r\n8CfBVO7hhPVxlkpV1ZUmHN2zH8s2Xa9vvAiBIHJRxbl6NMDb+eTxKl5QN026\r\n5JaIsCeHaXvwxpoEJEj9lElsAwgYOVMC8MX/ozsPxGCjGfupLArYQ7i9d5Ot\r\nhQsyQbB78XIA2nGi87G9CR816f0uBa1eVINZ3qZtFXalpF5SQ3PR7XfrMN4S\r\ncsZklIntnKZNWxpLjN6xxUUfxZAweNK7mzYhn2sODazOw064K/kgbR+OzQEF\r\nDA7rZcDdnd3oSI8UbTtlB5SFDLgvt0RvYamAKxRD9cZAs29AfltWqI2flWIg\r\nvsKqt2jerSInnxM2eKDICInhEvn87W1JRfX5MMKtdadmFZikLqf2PrlsxRYd\r\nnvsZAuefOCeQdNX3yxI5Z3e8OX+bErMs2qY=\r\n=3MeP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.2-beta.3_1665009816634_0.260265534484202"},"_hasShrinkwrap":false},"0.9.3-beta3":{"name":"@slashauth/slashauth-react","version":"0.9.3-beta3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"e58a7c6fcc3b221f1761df3c10ce27addf89a017","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.3-beta3","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-ZoQF4vb3uNd+qvQ6xRhmjQIFBnF2WSuvlH9Tu7ujhWoY08mc/046uyfnAIeS/iQpdhMdR5yKwLFgzY/jG5SyGg==","shasum":"af163bd2c565d1e45ee824df49276a5c66dec5b2","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.3-beta3.tgz","fileCount":187,"unpackedSize":8493743,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDFpRFJtOk+FZ940W0p0RN7z3ZSwvMyfZ5kYamdWPdlOAiEAiCAyM/xA/21yybxIOBAHm19GWKpqq9RicNrNP9uMoYk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPhvcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomlRAAlXNtsPeAvUihzankcwiWiTkFWRpXMZ/q5wWw2v42oV1QzVBF\r\nNSvTZwbw/K0A6xfVvbP4euaJL9K3AKDK0zCyX0llIp1Y6aFZroWJeZIiDmXf\r\nFo5WSkkYs2D8hs+zAU6MDK7NIGoX9H2bUXG2rlB51rGzsCony3mySrN/FCcF\r\nas4O8j+EbcFn73MGz7kTNYfx/o8H51acgO7l/LeGUvIJ3t1WHcPkMlHYsERT\r\nViRKrZrhZiAEzVNtngDApwW8KVelgUPxtxrLXXc7D1eKp9FJaXT39zIXdj2F\r\nLB9P2zm92L/1bpj9m18vpoxCj7N37Azkj07VQ3I4J8IEng/51S8t16NVvzB6\r\nJ67EzQwdtDKgg50DuDxTGRT7K3+Z1y03MfozAK8fDSEDp/us6vWA3F8RZkAP\r\nOZGuqRL5LINCqQ96ClPnHksj5RKQBl3zcia6WJOJQHccpDrnNxwAeRbPJsvL\r\n+U4mwzmw1aD6/dfKCso28PFDmEekTkksu1z8dRl2ZRLaBpCDspMfEQbE24YL\r\nw8DASKtHtvM3koigOcShNFBpm9WTtXnzAo8UaGzP/rB/9cRZno8LeeljVcXs\r\nkvEQUCpIRFLkne0bFSp1G7zfley5z8NGGs44sM+GC/pUo2FNXXXD6twFRYNd\r\no7+u9EAJH/XCupj5Cm/jpzf4vJTE9/u83oA=\r\n=fWz8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.3-beta3_1665014748060_0.9179934075663407"},"_hasShrinkwrap":false},"0.9.2-beta.4":{"name":"@slashauth/slashauth-react","version":"0.9.2-beta.4","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"befcc79d9588875ab15a35a5b2a8666b99f804f6","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.2-beta.4","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ooGEgWMInSc4Dx4Cls8HZi2NqtM1AAtYHvfq5m7z+fwi2cGizg53QtzjSBnti/r+avCyvISESQ0eSnI+JhWldw==","shasum":"0fa4d4989bf2ddbc4d5e7d8a41c6ffb362f1e1c0","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.2-beta.4.tgz","fileCount":174,"unpackedSize":2046225,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3YmvnvkBTVoMG/ALR2FzIZED+awChlPykFng3c0Nx9AiBPSrfPADaVIdXVHC16Vs4GDAEvewoKVQOG4TlcSr61lA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPh4tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHCxAAkgRNaePMm71JnjIJbk8F/cMcfxbXQxWR/+2OeQGZzsGSXuqL\r\nIykilTkYbrbyeIxGlgBCpvU7ZGWc86iL8jV5/TbcuzL4UzNIt9Rv8lvB+ED/\r\nt/CJtiIj/Yn8myVpzGjwStsnyBlU5t2TzV0dRFWsYP3gCsD+aFERb1r8rp0y\r\ne1fD1Hz97/Nlogh1OiV/LLEFqYt3q3H4ditw/xRBhLDbSOryZO+mI0a4rjaU\r\ntinWgNm3n1fugj0z9h5fF9YqGu54FScnjDLrKkvV/L/9iOJvHQbANCwbhhvx\r\n1S5WB1vsTdVy7+ZJm0OsXsHN9r+dg7Vsb2WHnlnAZtTN3HBcGeex+JDHID8M\r\nJVysXvVUiCnKOwAkiFCoZrzRxt2DwWyiL1V4L2WBUbtTT3fFlC7XeyPq18ZJ\r\n3SK4c087hBVMlqY97UhcO/CUyX9ygA/PGJOw08aei0s1No0CbZG5TyHNzHWJ\r\nq1y/dnRRd1DXhICKiAcUknUTU65RlHn8SsEomzwWuRo4R37YLlgWwmG5/xp3\r\nhQ4+KnqD3dgD3GWttODrif1x+LrNTS1JttDk668v/aaHKdIZehukbhVOWRSn\r\nuFW0lVNK6iAXqoGsTcI8Djk/QJzPL2FVY4pLtosiw3923NZ/BUUXw8FUYkha\r\neu07LVhL61Zcfx+19uUrVUr+DoMir/lbKHU=\r\n=H96N\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.2-beta.4_1665015340736_0.2746961239154029"},"_hasShrinkwrap":false},"0.9.3-beta4":{"name":"@slashauth/slashauth-react","version":"0.9.3-beta4","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"e58a7c6fcc3b221f1761df3c10ce27addf89a017","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.3-beta4","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-PVQrjvLwSxmPTupDwMv+S3WEph7cS/6KYo6wCqXqvLN6vGzINpP5xnlCp//XT9saeeNMRPBH31aZxJzT1LuhiQ==","shasum":"2238af81b9ab5015084827fba0ea87d05d1657c1","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.3-beta4.tgz","fileCount":187,"unpackedSize":8494029,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgYHfd+hBacnRhbyqFLeMqCYZcmzJQ8oa7VHoHyEm0NQIhALSoDe/pZtXsSXFiXp50HSOfNq12pgDlAI+UXEeJaqlo"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPiIHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrijA//eynAPLDzvpZM4mPDhWxfnnUjUeKNMaPRhy/TG7OxWZwL1q2b\r\n0ISLrJq5rHLx4L8Tm+IWDmLbdezfLpjnT+Rs6G+3sNQREgvu9Rp7Tn5sSdQh\r\ndV02ugwb7Y6I2J4POIcWxxMpZL1W3cfv2+tDbxdHIc3qkVwE8DQnDXGwyvrL\r\nBlCi1PyirsxXrliNdtPvmYDetIRMpvWMr79TiWGlUflxtyjp5spd8jSu4vB8\r\nCXjgazZ/YS3O3lCShjUlkeU9gLr0+y1tKl8BBydsEHs+E0BiOrFakINnwsge\r\nWGUa6MGSP8WgcmoChKkFbcFUEUM6gxBaXcUvGOWwKUDIAws2kx55bd42zynf\r\nvLq8OUICB5k7SrH5Baz13RBC+Ie86Nsu0eKe7dv/o2XqV8rfcTgOa3nSrt49\r\ntUzALr8IKINqE2iSYeca7gk4AGyq5ecNmfwwwGZoKffkWXjCKIm0Ldh9pDav\r\nm04QtJn5F98Zq+mm+taLlByvnYEUrW3Not4SpSZ2hs7eLmSHUd2tea0eu3uz\r\nPSsAzoahLskywJjGp0LIoSqwTtzRHFBKyfuNOy6h59KBWwmKM7IFUmIfeO71\r\nzyUBpbjN+g/d4cE0FXDbbP2Dj+OvEM2VhSLUzC+V8puIFPm+yHNTlbffBLDd\r\nwa+OPsbuRY2JbW71QgN6pdtp/P5a1Rzlgkk=\r\n=9lmJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.3-beta4_1665016327650_0.1605640766080676"},"_hasShrinkwrap":false},"0.9.2":{"name":"@slashauth/slashauth-react","version":"0.9.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"81156e67f0fcee4f00e7bbaf4ed47b079a9d5fd8","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.2","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-+oDf4HGmbhyQiDsHxVqbQEty6f0Rlz97sxZwO5UEc4XbmXLF/oVnZWDOdOUgol325mwHs48EplakbwOa4Oa4PQ==","shasum":"5128ba9cd6d6947c9bbea7109b6a9dea0c1b8da9","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.2.tgz","fileCount":174,"unpackedSize":2046191,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHvFe2AMmfLKABSZx4s26qRbyT9eEbFgkcaijoc6FmMwAiAfHntH2//kxzpMHC7uKhvyvkRw0R+i0Xh8nPhSSeqkXw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPlUjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1nw/+K3aBDIwuG0wzgXc9swSmnsj7wAxkyHpcBkmyKmIyG9m5qaNq\r\nwKU0vfN2K/1dtEpsxfGC/BdtrPJpPy/klA8VRYRlvdRTsdQuJ75tMvPOJF9W\r\nAnRGSfvKY5s0mNYCsRLwhxsK2y6UMu5b/Bw18BZNHYr6PFcmYcGsuyYvq60D\r\nPS6vgsaB1O5AiXdOgB/7QW5mb2en8wRi9PL8UXOAGor+Kyw9BVEIXm066L82\r\np5DPgrZFDCBlBH6LZWwrhne5q2Bbb+/XWVXaoie2v2TdlffML7ST3Dkvp+84\r\noN/7PcdAVAymi+WQNs/4ABD6UePtlL32j/elt1BNmLkozZagJm8C/a+snhno\r\ncnwVUypaNCxoXqpF7s2n9OGzPfJ9p6xFnrENfhW16dSDNxOiAM4DjKn1gN7E\r\nw9uCCv9RNa8pLW9uac0oE4oS/g5ZacVyG91H7WcSoTAwBGP0f/ctFiEjxXn0\r\ndY/cVCSC4zs/+3gIL6bJb2GTKjCCbAPNjUXbCjKGvt99ulbvbn5et71kqjQl\r\n2C7PoOqI13pNxUC/09aDNMU5Lyk5pwVcMbfsQR1lIuOPjnRAX7YEwDJ7LrH+\r\neR6qEH8QrMHf3pnRZVMZeh8m3DhqOhwKnFewetKa2x0swtI9VeV6QzLSsb/r\r\nBkhzuv5DBNMWvIUyWHX2Jy00E9Q9MEir8Z0=\r\n=ZMaZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.2_1665029410794_0.31187511883774377"},"_hasShrinkwrap":false},"0.9.4-beta.1":{"name":"@slashauth/slashauth-react","version":"0.9.4-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"64a8756adba1639de1383f66b9cacc1fe509ffec","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.4-beta.1","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-nDAjqCsWtYdJtuKh9nv4RmR79vjELt9fvDQaFwU2ugqf/VdB0SRI0rVV+ByUH61yqKugREyZJDd1fdrcVhC2vw==","shasum":"490fc46c5ca990df87302852ec645f511e87b137","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.4-beta.1.tgz","fileCount":174,"unpackedSize":2048025,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCi7vy2ZBeLc/Q+l87HhKe+6HIFqtA5kIB7AfUp9c8w2AIgRmifr0cDqCdhMQELl0ivUSH9R1dyG58c9bEX07jZqHs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPl6cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr78Q/+P5Q4Vg5kO6Tcvw/iBauJ4fR9o8raHFzzzXI8jxixRAistsFm\r\nWdyvZAr6mAIHl8VG19V6Z3uiuvOcpIN4htoT0IVNz4g0DpdZ4R7am4zHOt/d\r\nXl8dHEifxGoP7tNvoxLKJETXj+DHM4I8ipIYLhJQSr3E0wShM5lKLPc16C6s\r\no8n4nCpOs/yoC4xrAiLt4yguVAGlCv/ku0H/e3XH5IoAlZCmkvyTap8TdMSy\r\nJ6U/NKEzEJs7ErX2RHKD/bg9qvONZRYwwnP23gWRYagJsXcWAExoRNC9osml\r\nzOWKZfwi+R3/pf3l+lUAC5ySXqjCc2C5pLoa/okK+EMXO/o6EPsZTiBgfGi7\r\n9Kufk9qvO31N4BktJt1qLF1X4ra5ON37AHoLIx4YOVU7ZR8b0lrcmgkRibRF\r\nJp0nRyLIebnFnj0+Goy6361uuVCZafMGmET4q0+sYreCSbxcZY5c6rkZNP8I\r\n8UaM/EhfdgyfsjJC+kuVzRXFoGSb/4eYVQkdKoOttaPoj4yb0d/5NTT416jz\r\nCR/Gl78Rps9DFErj20055SPY/UH8b+H5lXw3Tuc3t4ITFgPRIBud7+WrUSER\r\nImqYbDp8LJrOC+zEjQILzI4INwkSwonQXO3oIJ2uFcd14/tFM6sNbjA2BkDT\r\nmyejtJku4AAliFap5LGypeBL5CVaHSG3pnA=\r\n=zzT0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.4-beta.1_1665031835919_0.39617023318176625"},"_hasShrinkwrap":false},"0.9.4":{"name":"@slashauth/slashauth-react","version":"0.9.4","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"b31d9d84c162255fb8c21d569753734d48341d73","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.4","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-QfOU0HInFgd43fKQVrWEoOSJPF6uXoHFFoZat7fcGtvj2YvrWxUpbGgFFbjXvp2zd59v3x5ncHv12yKHNvLSXw==","shasum":"1a3e3f782763fcfebb3bb80323d99f218b2958d0","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.4.tgz","fileCount":174,"unpackedSize":2048018,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+n2tBZQ22dJnFzsk/e0XFqNEzxYxQnFvIKIA/WBo9FQIgev6YGcWjFl/AqViUwe1vhSyffCHI/BmxfREXKrABUrI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPmElACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmox6Q/8CTr2GmGkE1NKC91xmxkf/7K+nUSJFdt0f0aOtv2n/eNeGOtS\r\nakuR+dWpksjuNPqU32Z4nznQAmG9m72CO/wJk5PYXCkffDH8kk/jvp+RozHw\r\nglTLAMUPbmwOq6QvQq647fc1gJVPwd04uF3Cl9Ui8brCyZgub8aGLvGC3Ttf\r\nStlJBvWZe9Hjeo+aieEwg//ptGtT6CVyTL9tleH3391qCl5z+jA56OxwKbn/\r\nVSV0Tu5BjY+ILD6FeD7KlN+rthIRhanYxrxlGNjJADW8l4RoWsF/PpTxTVxP\r\nVZOCdwpmqq5hp8eZcrjgA1RspswIb83jHIdLTIihqc3hHd/T5ETwdPRmNMUQ\r\nb7OooWF2VnBflf9wPOrHPnodvwGOP7Oc3VkMmrbzdj35DnVnSl6nAgYR8nzX\r\n8vf2DbeEfpYwHpNLkQlU0q2d3/ZQ0yZ60IQijJuIkHfa90kFDjaGekgtcNT9\r\nAeqiSQvxd7ZIcHUoOTXhKChvo38LAohs4JBd8jILgR7tYQqadmJnTdsTo1+o\r\nmJra9b1Dv6JnKJMt2QMtunufug2/P1D7/GAYVnq19RerYrIEUSzKcx99420d\r\naHfqLBxYoth0MtYgbkZTkBB603UifkwICZ8sNMn594vPWkaLWa/C/aAIRreK\r\nrUvUb4hlTTIa65dO9FJag4ITubuYZKNAWA4=\r\n=28iN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.4_1665032485090_0.6756845295703071"},"_hasShrinkwrap":false},"0.9.5-beta.1":{"name":"@slashauth/slashauth-react","version":"0.9.5-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"856a859ed8073f96dbc11783c7ff69ecfd4473fe","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.5-beta.1","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-GDlyPnBXz6e8CwublIu/0Tc6Qtj9ENXmlszU3KdnbRGI8aoZkeH9gHV1dEAI1BDSfhWUouQcRXF/9JM9op+2ug==","shasum":"428ef8472185866cdb7b1d724e9b12d64c08e57f","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.5-beta.1.tgz","fileCount":193,"unpackedSize":2092394,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDBkmHTORwCCw5k2tSDTYPxpE9Id3oJV2U/uw9sm7Nl7AiEA3EcL8LcQQj9SAxReUOUxLtdVrkxKcH1gzayhtjRGtOw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjP4cHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrG2g//b9Wh0DMGLAjJuMJxevPbpMuRjpoxQ3cZYjyxDLChVA4aN7v0\r\nV4Ru6ikNEcSW2FiWToUKLteLyG79BwDP10Kk9Ak6/u4LrNXkciJLPvUU0LdX\r\nzlz/uueGSgCVVMGiOkCLB6xdJSWzYQDbMGpY2qSuZdfMBXt6hbcbEUERW7ZT\r\nS05WrkO/iReWLGBmj7gZmXynNLiFoGxlx2F5ZCI0IxmDcELjul4eggMMgeG+\r\nyyraL8rSbqzbbNbSzZ8KS8XfTxKWhuZ1Bj3V5b7E80DjNBWlWDQ/cahJZEnP\r\niYKS/PBl2dfi43WkxIGj/JLKo5BVrYADZQVGNQI2T4+5iax4jGZtIOPAAxp7\r\ndjNgoY5r4WBR1EaRnP+P+BVPYxnOiJ1coJF6FC74MfSyP+NXcU0nH1RFF9Lw\r\nETq8pU1cpXJKLC3lSWKdGwFLss0cO9AMtumz1TsphT1GNqKtr1Wp7Aez9WKv\r\naABGupiTywYgLX7KecB9BmHnPZ5fZTLyAxXt89wHZaFaVd2INlPvy9TAPG1t\r\nxgfQPeQtyxXF0kHPhGAUJT6l8Dq321bc1X7AA3nc0EmnVeEtNMQirre0qNaw\r\nBQyuCCsgSgK/3oAuDfX4vS39gih9Jk4RWybWS27t6/lT8pY1uvxqIB6iPoMW\r\n/t35Uhmz6jEFO44gSYPx1+sktZhvKOZjiDI=\r\n=4RFt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.5-beta.1_1665107718879_0.43210893137271045"},"_hasShrinkwrap":false},"0.9.5-beta.2":{"name":"@slashauth/slashauth-react","version":"0.9.5-beta.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"d5ed1eacd63a868845befda890236e6800b4f4f5","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.5-beta.2","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-yVLF31dOjeVtYClczlvhE7GL6ZUPWhRECgzBe+tE5lfiggsCrGnB0bYiXtnVGYMHbLy3U8HPzMlr+UbveOiZoA==","shasum":"ac77a04c752a153b4395ce7cc62e5727d4d95aef","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.5-beta.2.tgz","fileCount":193,"unpackedSize":2092396,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8zRSqIQni05/jJGq2uLNFZTZj/wYM9odPl27UXyMc5AIhANR+zzymByfR+g542Czqb1kfTpWatr7Hy31vm4P692C9"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjP4lHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAug//QIgUGGinMUNV/ZjJjcjZTB0UeaSynDmfLyt6IcNCbNmA/Oae\r\nxAZnlCqpLHUNqrus4Ghbs79BIaGKDVS7/u7ZL+KKOvFV6luIYl4jdDseM3Nv\r\nJYasIcjpHOC+EPjxre1vh3CKwdGBsjq/J10BPnhR3khGuyZjBMPx/WYhPhFP\r\n7IrVenc/Y6BIPcMXIOpsOvHq7Py8aTPoGGfpu0b6PaNdxpgjAmqz7R6+CfpO\r\nZSIg4K1fZWaYDkbYVCOkRFQlyhrsb5aDH6nANacNzG5I8bduwoVx0Ou7n40x\r\nsziKKJd5eTvMARkAyT8jj1nMD8eIgXGu/UnlfuSUKloMluZQrPqaLviq0GfK\r\nRBccVsg2T4qzZGAE8CQp6FotYneHv/xV3TJ5klCR4iodWltxgikmW3ZTIwpP\r\nLxInZOG4Js47OSfST/L6DxvW2JQjwV42hvxHGHbwL6V/OaYPX+TGKs7MfJaH\r\nb4HGMb0QP37Rh+GOshy4KfGzxVo939L7pVLyKFEe9UvAlfyzD1VBqXW0dBo9\r\n59+H8U0ocZY6Ji3X7wAXtdrHzFhAt0S9UpNQCv0JqWFw3xndXkTU4dom+5wS\r\nQCagqEj2B6C7ssQ7pBbrj+awP09DIplF0Vmf2tSc+TUdV9tyZ4Xq0P6xdgXz\r\nOwd9kOytXgLfldFd9KG+En0j6ECB3yquQrU=\r\n=wEKe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.5-beta.2_1665108294973_0.29497440968921995"},"_hasShrinkwrap":false},"0.9.5-beta.3":{"name":"@slashauth/slashauth-react","version":"0.9.5-beta.3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"871c4dd7b786efb9dd7044b48ed7082fcd810671","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.5-beta.3","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-cO0iLHuCUhQ94k82MEmI1Z6EOEcvAwFYN56p4F9W42wrLGjCuMM8C092NKECjsHTQdSMLtwfhPNRh4M88zDBMg==","shasum":"4c2508d702bdaada41d3b65eb65115c2996a5563","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.5-beta.3.tgz","fileCount":194,"unpackedSize":2095500,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCT36Sv4OORe11Auuwl08VRpUBGeF2w8p/KWwdZGigUfQIhAMFjahpo1e6TzcsWY5EiufzZKWh6EdYZBkKoZIUsN1P8"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjP5b/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/JQ//YcQ8MLztpHZkdTo2MPP9fX4l7ttDbbutSneX8U6uIj2cTL+D\r\nLmLPwJIar3zt/iX+RKysHdKlrk0hK2t3TZe8pJ8/00CEjmR+gkyrvs3nxETc\r\nnpNbqYxJTIzK+k1nKPOOMs3l2/xHUgs6TXdUrLRyHv7QnpWxn+PskRRSn4uG\r\najMJHDf11SFrzZT3T0E3ff4ZkyjRTwdTkIHGpiTfGQqYEVIRfDncN0h3/lhQ\r\nhg0hz2EsbuLW7k57NSm6wcG1vJp85O9uEgvjrfrJNz3rVT7jonqRr18GBmXw\r\naJ4jKDxfsn1uenL3C3L3olGdjcRTqJES1EyQpmiCNMN97isR+FA6xG01OhhM\r\nlgefCA2V6gsa+2Mby1Mt+WTQQ9WygDrGb9/uzAdvIb2BNhOdqxUej92ec8Bn\r\nbEH3GiJ9yyAewSIVGC8R/1OxbcKLNWh656OmW2a0qXI1SYmPv34edCsbahe4\r\nbqjwUXGDhUeMwlqKeJw2d8LYAbEwOuDuXfrcVCLyJf3PktHm+5r4NJ0kfJxi\r\nPBHCfYI1G5dJaR9SQKdswXY0R+QlS/mgWvVSFhK6ddeP1i+1YJXbwsKJykUs\r\nZTlHouYViawIyra98P7uLTd3qxo9gVmtSz+SgSKTGqpxHKr0Z3N+YRkl760N\r\n5DbfKQhIcPa5ibtn0ejwTzoM+AJ6otQQyEM=\r\n=hpjE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.5-beta.3_1665111807219_0.9766615490137625"},"_hasShrinkwrap":false},"0.9.5-beta.4":{"name":"@slashauth/slashauth-react","version":"0.9.5-beta.4","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"fddbda1019e7ea7e46153837304755e69f6ca78d","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.5-beta.4","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-MgLUlbFVKYxYpxTWwiljgCwtRboNMBoqfcyHkVMk4ZkXxUK8dh/G5/gjRPoF93KRbUQtlzPpo9z09BerSXOCqQ==","shasum":"6062671d7a5c344b78eecc6f73dc328ad89349fd","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.5-beta.4.tgz","fileCount":194,"unpackedSize":2095440,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICtGuJrTLQRboYTUVNXjkA9AnKeZGcDAUwVZ0k9K7j9QAiEAw6mfTe4zKopHc74wdqkqlHPXZlQTMRFMUTIXmJA4OX0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjP5okACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorGQ//Srp8sHIBYADRFUMyz7z67Nb/fJ8CM0S/ATiKC0QAfdjnKmRY\r\nrztQo3kLSSh0LRXGD/byWC9Sb1agfIB5VDr86vJsRY1Y3q8/vCANcXsWladR\r\nnFw1Aigj0tkEp/oeGE+xLu+LL6eNTVN46zneU7uSO/ATlFE0Js8/HI70CHYz\r\nodHWjUPa/dRU0qygmyUvetjR7htzaq6wjCyXIkCreTjBUbk7x+kJpPvPYcZJ\r\nSVWw85GugPh+e83lC+mslDXmDGWmqid3co14jnrvgBQyqPZ4hA48fUfwWlf5\r\nsQWFOtSuexeTj0YGslTwB+xv3upMXsN2IA01GhGBnTkp02lEVTnlwyohyFTO\r\nIIfeuYTWrHh8Dsf2bQf8cqNwtFbbWi/A3EzFqUisNdpj1rGTwnu+a3ANAil6\r\nzWOJHyE4Ge1YwY6eDGz3M98WcoVSXgQQOOF/Ql8fMmEyD9CmezYOOTIzBf18\r\nhmVC3mbabrYiuh//N4t9CekdDNl5EM2XdS50HNey/1Ffqf760evXj4DkEqua\r\n0+5eq0It5vy2aZnJDNwEw6y8plOcD3wUGidlbHAa5FaqpPFDHHgOr6hjXEz8\r\nAKV6QFZ2a1jI9ZJ/xWhNsr02ZzpxuTyvzSwB1WJHfH+b+58MPbEPeQCxWq6z\r\nZv8op9Y0CVilD6QJ+qTR++fp/SaIafuadFY=\r\n=z/xD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.5-beta.4_1665112612280_0.303094140508404"},"_hasShrinkwrap":false},"0.9.5-beta.6":{"name":"@slashauth/slashauth-react","version":"0.9.5-beta.6","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"2a3d2728aa004e0b8d53f1acf8bb6aa3e011819f","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.5-beta.6","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ROAeyC15MgS/d0otlM3n3S4UN4ErW8+9s/vY2KC2qpGTkj5/kRWRECyMnLPZI4XLR/YVLGSdFdVGj4nTTOJVKQ==","shasum":"a11c10662e27cb3ca56ecbb5f025f441f995363e","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.5-beta.6.tgz","fileCount":194,"unpackedSize":2098718,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAt9JP4ZaeUtWtMYkt8PUm7/KtVcGVsBb8dnziQevWhXAiB8Ws7w3Q4E1k6dLaIbDyAQQ5J29oB5cmMxHRPy4KxR5A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjP8FuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrn/w//ZjVCwsKS6yZJknMudz2kiiCK7C5qXvP9vzHJhX/xzUOjznKe\r\nhZJbZ/qWo3c2XWG7UeblvTfCzSpLVDr1ctIwvcU+MdqsTYAZzLIOYmkNTSyW\r\n5gFPwYV+jwk5dgyRAFlghri0d15jKxeGqXnryceWgYe86EBxHEWlnCEtnIE0\r\n9M2sttmMKPtt3toY7o8/VlNqB6TRfv8P5V0hHat3Sg6M+hGPalQLw/tsothz\r\nLJgpGSx8nXsjwr7Tyd0I5XxhT9mxyGfkN3GmhgUH6cieewesiORNBnL9WpTA\r\niSGT9Y7HoQ7teCICUneQv4sKxdv/p3mnoi5ulnXUHbD4WLmEkPgpQ7NKdxlS\r\nytLNDnNmE7r+kWlrmH4C8WEC19tJaIr5lmr2PaXpnyZXK/DfBeQhdnUNfnRD\r\nbEH9G30A+9hEg5rLSrRu5yVqTowupyKfgbYd0AxdIuUuEt60GROs1J/M5f+B\r\nR3vH2P8n5Dzh4sk5f/oeHNakHChUyu3EJi2SupDk1BU/fZPvu63pSUtFGiMK\r\n4k7d8r8xN8ZNeDkEHrCXFtqdWr//TnH38TJcUfL8Ad4uhRwNcjA4C2cZ6jFx\r\n6aVj5QaiS3db18yj28z/ygRTu9+0Lf1nYkDwZwuFd3Gh+KXVgm31XvZz85DL\r\nT6FjA63qvbFgeqf9LucLfs+haqz/68JwYkA=\r\n=myVu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.5-beta.6_1665122669791_0.7774805446785991"},"_hasShrinkwrap":false},"0.9.5":{"name":"@slashauth/slashauth-react","version":"0.9.5","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"0012e904477e46a921091b2cae9fdc96b4c4a8d8","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.5","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-u73wFSYSXsRCAQGAcOTja4XnBvcO3sniGhM1XF+NaDwy8l0Vsc/piXKX5FU2x0nDSrfoofd54cUVAusjTSbC1g==","shasum":"17f94274db98ceb07b8e76e0f8b596d58aa78770","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.5.tgz","fileCount":194,"unpackedSize":2098711,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGlhSt2dclufnQ+mvkF41vxg3ZsF9GLk4N4QQ63kCuNLAiEA9HlsQPeI7FzMCmDk0a7uk9TzwOPpKQp7A287V6HHDAc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQE/7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpp4g/+OHzm3WWpBY74I4ugoCMDY9faYSQeb8rQAX2cZ4q8jKVCv+Db\r\nqpk5YUNqtMlHYqDWrbN9j2+G4o62rORinOJ+AYJFq3ofl7DahMfIyXC7ZZh3\r\nPPrGVv6eT7QtOr+34fAlu81E/+uTUc1TvRMlrsh4yHARfyoztniqzsMPvET4\r\nQ09siuJu3/ozUvMQ/XMw3yihkRO7FQKlvH7lpN+l7nBa7NH3ZEUYz0sfVuVs\r\nJya4Z/oLrGJ7JEeXSKZlu7P1H4b/dGohzYrsVt2tBtb8hyB5O2bH/vSZ4KI3\r\nsiDEVUEP+tcWHny+y5vJAyV/v1rZbeHNGUW4wof/tk7L88yyuECH6ssBS5dx\r\nMYoLfPwLNMWbozJwvPjNaVw/CwDHsn3B1ukBGfWJ4xN/awVP3drXcyGl5thb\r\n/VgjcnANpqt7XL+kYaECpCXUjlPIU4eejC6Y1M3yEVsHsnNb+9wKnrMwcK3a\r\nicUkpT0pjbtDpuENpGzUuplph/bRXFmWWxcstQZ11eJ5qxTQNQxQwBsdtN2I\r\nDzhhBP7zNWyz/xRujHOvVRGBKyUFCfDA5Ug6qicHeEmSO4PDnRb+37pUKA40\r\nBBJLFm0BIcapyO002qRyxlcupmgKeSPCfZVL4zc7oRTRCwphm8g7ojd14GYO\r\ngd0h3B2vyHGM47KHTu/uZ+hXdpswpRvzGV8=\r\n=qMfH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.5_1665159162794_0.006907996096934044"},"_hasShrinkwrap":false},"0.9.6-alpha.1":{"name":"@slashauth/slashauth-react","version":"0.9.6-alpha.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@coinbase/wallet-sdk":"^3.0.11","@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","@walletconnect/ethereum-provider":"^1.8.0","@walletconnect/types":"^1.7.8","@walletconnect/web3-provider":"^1.7.8","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"0012e904477e46a921091b2cae9fdc96b4c4a8d8","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.6-alpha.1","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-OSvaeTglvIw6UEiHYG1JgO4TYImysGIyfv0OGWoIa0FY+4TPUJfma6c3Guh8D4igRJ7JO+IP82FxKk/daDBtiw==","shasum":"7b4f81f80920af0a2d96897e22e3faa395224d77","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.6-alpha.1.tgz","fileCount":194,"unpackedSize":2120665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTFWBof3l59it4xJkqFh6rA/zB4s4KY0ADlpEt/X+wAAIhANRoWjVbrX4moK5oannNCR1BtQVgpcgPTFbpUDlUtCDS"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJRFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqM+Q//XvQqV87pt/w3ttEJyBDTT5NWQpz1aG1hxDimypDbXCe7Wh2j\r\nExB9stmzjJ70icagtwLUlj3ecqH4GxJ9PPnoO1o4Fbl4n5MgwnmZt3sTE17X\r\np0LVNzGd3JkfXvAVnvJuRtkc1tWuj7QkkeigfWEb50pPuksn/nbSm90LRzzl\r\nXKTI4BTWQrzY+PAmXtK3FBRgka2kHUfGvKm88EIyq/aBUk/e9c2ORsog1A1F\r\nfy2oU8bspZiCqssf2xxfxt8UA8tD7mMztBHCqK59ms/DR8/vE75FZCRjB/vC\r\nF7EPaUgs3kialz0BT9yKek0A52npAWruxDF//aYDT8KDZCGgMw5Zh46D4O2y\r\ndR1oKuq47U3qy3Xf1cGiua+/MKo8+UpbepkP/TiXQ8lPplnA5AhH/iqsXm26\r\nNgPsGgEgVjQf390iEMa5aIY4bzaX4oz8XbEWpy4bQ87cVB6StEnn2wdMz7Yw\r\n0w4TbEK9+Q02zQuU3i1+IGfi5lunwwmm8HX4YowA2mu3VrIADrK4ycOYdupc\r\ntfefpCqfhB6b2FOeDmvzTRu0WUfxpeBZlbqbpAY2XlkdL6F7eNWeiz6oG9VJ\r\nH/Obam/5KqtrpiEBbM7bokOdFgxt65cCPiA9Xf5AbHdTLpCdDq7PYE8MSmR4\r\nbJZOYMx1y0zl441Jgzz9ImjoVitmFk5n5IU=\r\n=0nTQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.6-alpha.1_1665176645620_0.5244927091696217"},"_hasShrinkwrap":false},"0.9.6-alpha.2":{"name":"@slashauth/slashauth-react","version":"0.9.6-alpha.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"0012e904477e46a921091b2cae9fdc96b4c4a8d8","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.6-alpha.2","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-LHlGdLpUX+vtdJWiOvNtEcZcLoPcc0wHt/XmRtHyaG+S1ImHsoXmS8xGHjvUcJMlr0e/YM8tGi7/ruq+JOzRQw==","shasum":"15c1e96e928e4000c5cc696295a9273349acbd5b","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.6-alpha.2.tgz","fileCount":194,"unpackedSize":2120492,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHH8cjIvsgnbNlnU9yFYN4mqcmSqqYGfDxbbv4CP3gpSAiEA8T4PFW/jw0p7nMkGiMXA3tcCluworqMskvI+NH5/Kf0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJXyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxIBAAm6tcNhIP9AoRc3hTSODeyCao/MrY21uRNNuJVfNnyKXS5YLT\r\nCKarVuoOwxOYQ9qHCkM4LQD0Rc9GJmNBPo8CVF15ap+vJ47jFkaz3WMyctGg\r\nB8YGaSW/tcHQLFa80WFJY9AwnwIdijtVOvHrAIWBvV3iAi6I7F6r8hZWXkl9\r\nfngcXrg3iqtnokHdn+AgBDwuiv0NxzZcZSa3PMpNgQOy1ROOpzoKkatk/+Do\r\ne2b33G40X6NpUrKoTyJjCTJXpKy96yaHo2v6tlAEbPzs93VLquQfbjpZ/3Sk\r\nAWe0w4xLKrbytmx4dhzofGt3HoXpdLaIE9NoNTW1w5bCNXkiOmpr93mmzOm6\r\nkFPgV5VqfG7wAqzu2gbZwXhA7pw4FVXmTJsJeC6PxBIAqzRqTTM87CTKjOTm\r\n9rUvSrN1nuBjFifJ3t5twup7+w6HJ4Lubh8qS8QIq8eec92MANooNgJPr3fd\r\nkXKWtkT8z+oq+BABT9fWhj7qlPgwFdhCnF6ipI6c5PkNPSO6+cGZ67VsTRvk\r\nQPCdcuXT7+KjrNsiDW44LSSNU/5fTfR+3jkMPEk51i0Z20DxRQ48NX9/L4ZI\r\nWH+G77dig/TgX/d8GAKEQXGl6D7NtNSc80d5smZQMAthFWBgKYeicSt+FNLv\r\nNl1MgVC/ZgMxkSXzoY0f/ISYqA1Y4vUxGcY=\r\n=HKVI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.6-alpha.2_1665177074128_0.6586093875994434"},"_hasShrinkwrap":false},"0.9.6-alpha.3":{"name":"@slashauth/slashauth-react","version":"0.9.6-alpha.3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"0012e904477e46a921091b2cae9fdc96b4c4a8d8","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.6-alpha.3","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-eOOiDPuWNcNjBq+2BdnOQTwnpgEvQmAeLD66LgtFhpWzFATkOyKJVx9/lTx8LpeZG4Rg/UOksbwQxGOTjduFpg==","shasum":"5320fd96206e8393f88ecc5981230bb6369a02c3","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.6-alpha.3.tgz","fileCount":194,"unpackedSize":2120492,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIClOJMRySeDnYJEqUeYbRpb/XT3xFgcztmaf8uzhS0yIAiEAxrs1Rk4DCB9F6w5n0naWT1KlPqA7OosOTlWMqOp79NY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJeoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrehBAAlS34g57PAioslAZleTxb6mS2RVl8Pa66NsKr+9bGC5DvIsNJ\r\nBn7csnC3lFBNw8EG0+izrfslNEzZ3Z61uR+B2ZtHwq/DnV1qzdbOLN2vsM78\r\n30m7acWXUzFwoj1Q0mL8B7LJqurH/OoBIPkPSzfCj7Q0/K/A11jTTnTllDXS\r\nvCDFBr5zIKi+3bik7DGSr13z7Bm3axwOOa86mGwIQKsi7JF5EdjoweYdoies\r\n6v8X4GJIsdrxhahfY1EkRLCJyyWxFDE7oP/fZ1GgHZpFMPIJ4zLXNzvM0B1b\r\n6/W6tzFIX4oqsQEf6V+gxyEppXPJwUv/kCb7dfnI53RF794ExGMNoTPna+2r\r\nZBeh85Zyc4dsW7nOZFYnEFm2EvpMdWfW76zTPdCr19c8HJjWhdxCfUxjLqBN\r\ndbVuDrg0K57DNlpJHC73qjJX5waa1LsW76QqgtzA3IE9V3LnX2Kh4NHTp3oH\r\neDLwpuCkNf8LDSOm7UF1BnWTifinfLF8nCS6kOqewPkxq4nGF0eFq0QWePcC\r\ngGyQSAXk9jmwDcv4VUxqQdJAmOAsDTlAiK0ZJTW/7D1wFC7wRaCIra07vbXU\r\n4RM3OuU2rOOlDQhaXj9IadPkXru003YSrm9KTGKWjemiJrpak8u9Hu2DDslm\r\na/pnQpn9f8ky+PjDyMNYylpUidYrdwQ9pss=\r\n=5j0M\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.6-alpha.3_1665177511836_0.3292266746603125"},"_hasShrinkwrap":false},"0.9.6":{"name":"@slashauth/slashauth-react","version":"0.9.6","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"ae115f0d25942c07cda4c771e7a640b55c609795","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.6","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-OOje4VD5xKK5xeMnKmaIdsX6qb7aT4DgeQ9xY2dfFOYXzslRhkFBQxz2ThRDn4KgRByQkdsxhVVmiypLkN89aQ==","shasum":"3ca97f3022e8acecea49aa7f13a88382b67a9993","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.6.tgz","fileCount":194,"unpackedSize":2120484,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClz0QcXPizhAFa48G5Sz9I0GpwJzEpIRf7ycpzXWtY1gIgA3v5Gl7PSverDCFzItLoxY2h5DfrZ4oIP47B/nGw/4U="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJqYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFFQ//Sv2C3hrGD+C1WzVTYVFZOTsrt5t/DFYF/GFrh+3G+cNotlaq\r\nuG/HQutFqwW+v2f6TQvROFzOPS8kokjh7s8LUQV6qEBUzmmE/3tnivjVPZxe\r\n6/JtP0QHNiNkVMB9dkF+SLI42Y2RB5ftUkzd8EdJrxpfK0Wm/+8HYQop7N52\r\nloVvbmS5DoliD3W30grG0H6jtPPNTfF/1ctiOkO9DNqH/wmgWwBVggEEKwN/\r\nyxgykC8UCGvjSL1PUrXHtbTwhFzo9acRVMT3P9ngceGsPCi6NbgyGN6VHq8O\r\neyfzeWNMNBaQOn5mf52borF9alOZUQ1fe4BOXHTEOpIzJkuLrZh2SaTNlMUk\r\n2JnEjWJOc3T2g5Pvl8OtZRQz9x0ifuVxkDUn4nmxFGMCHC/o9UA17oLLVvpF\r\nFz/IH4l7KRZwWWBMIP8QyUDvd16UZyl6c2PHkvfXs8lE0AfYbEZn8ZhT54tD\r\nU/o5hyhVguCcOqwhve3EvLH5xUJ+m6AzQqW8HT2Ksy4pGx3pmdYAXCh7nloD\r\nGNvHhQwneg9dc/DwDYogUHIDXPvm5tT/es9mxlX7P/xGCdxF6Cqq+V7rcSTV\r\n4wCfv7TET49ssRn7NmxV0qAlnzxyvG4/KebB74rzNm3IqrHLrtGjOHXvGpY1\r\nHKVtEM/EYOpkCWp13ahKbo1bvyH7UZCZxsw=\r\n=VlfQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.6_1665178264151_0.8288551112740943"},"_hasShrinkwrap":false},"0.9.7-beta.1":{"name":"@slashauth/slashauth-react","version":"0.9.7-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"ae115f0d25942c07cda4c771e7a640b55c609795","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.7-beta.1","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-/lKtcJaO+lCFv80p8UfM2fEF+kiKkHOxrWLCeTSh8eI4k7TpRtMPQwa2ve1zV6BvXNAncctINjWQFres7fjOEQ==","shasum":"8773f133e215a3ebcc4f34f0dd5af395b17186aa","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.7-beta.1.tgz","fileCount":194,"unpackedSize":2119506,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIArHGCGRgW2MdnGVrH2etfB7ixfkghulgo6nldCYAEnTAiEA3Skc63NDtUnQm4OzIX2x1ktkqKV0TZjklh0vj/tc2es="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJvtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvIg//Sxp0D9ageFQHxIw/g5UaqztdO51Ysv2OetyD3ymtn7h4fiFu\r\nlJPf1DGNaRDhpcGfSKAsnWUrX2zgR/WvZgCIJAPKx/L6avyZTR1D1dLmET6A\r\nPWqoe4z5ixY1aWG8IiQko+dOiSg/LGduM9cqfgQKpK571q2418zU+u5KpSjk\r\noRA2b9aloiqdWUUcPSsxWHp20E/nAJhfDYwucC7Snuv5XugfJtO0f+qE2yfG\r\nyyqxCwQw46ad54qVgbpLnlpbOHJS9MODOMFQ0Km+h0U0gwAXf6Zycc3HpSgZ\r\nccrrQ/yPnlrI+7cyCXAlL8SfK5mdLB0aQ6ZdBeAf7WrHIRmYLPxnE6FDu7SI\r\nIQ24JO/UqygKnnYxXUsQ+iqwTkrk9hlEDYhZXFIY/SVvbwGXgh9uWL6uCEV3\r\ns4irHKeqMZdE4BgbINPLmpKSEOH8EXzI/3P1zRu6HRJFO2eUe20QcHOLQkC/\r\nuSSZxPswqZbdlNk3Bnl5AH02DImeCuywWPVbTZqYxKmq2OcJCjqpaJzmMzQv\r\n77gpx6ZacdRiHPf5xPmF65Fvamr80zrYZwmEVeVUquPRibDHXVN+R7iAPopb\r\nGaT/TuLMvbBTRw601+e8Ocyo81OAneLHqaScM7CE1mHSHqllqtS1azGL5EbN\r\nyQrce+mzVmFX0UyFPlRyhzLYngmFAdxCJpc=\r\n=2W59\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.7-beta.1_1665178604983_0.9780697468569719"},"_hasShrinkwrap":false},"0.9.7":{"name":"@slashauth/slashauth-react","version":"0.9.7","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"c7d280811d386713eb517c96a204f9f609a36863","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.7","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-S0H/WJQJ+1wys14V42YF4a6DM8/A4jz8zWyTVqdBUkgrd9jMxQYEBy/lEwNsD6FiSPbsgF9pwONVWfJEY9hQwg==","shasum":"df25b4fab97c8b6497de150dc71631ba16feb8c1","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.7.tgz","fileCount":194,"unpackedSize":2119499,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSWWlMqNDgfcIFlAsLPbAgecONNIoRVRwLj3YG0SoREAiEA0l0A/UE5ie8op8P4DXLtJwIw6UEUcfKEMUnL5P1L8xQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKd4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/IA/9HLZPr4ZmJMd5CNQBu7VMwdTM4VfHvRzv6USHZQ6LG326Z6UW\r\n4uEKuCmyDCGo8uBV1OarmPhZr3SnDyBygA5ohtpBy6bah0JzGr6aAq9JfcTO\r\noNAlWKeFO7mcINqb8+2Z0IMCvK+cSbt+U1QOIdcZnLtrCTTyNVCUke6LoBKW\r\nQ9TzRhe41krIdMBKTALDxADjpm/gihpFrPF0rKe+hn3bql8b4Ia6N4eXwQVV\r\nyVJFmxM4HSVokLrGLU3me01nmSsPLQkLIU5efA9mR04quZDPRK7ciZRE6z1H\r\n7c61Q0pyHOYfBb3q2e/HrIlv6flTYUyC1G4T0iiJFhzONZGAsqxqdrXag+D/\r\nuafWn6jqN0bJCubmAj8xRa4D8zYd04bqzXQshPNKNTv7Vy8BVaFBxeockAXi\r\nZrTIiDXtp4SZBBMQkvNDjTrupw0jciVO0tc23ATKmRQFED81GE8ILBRihP2v\r\nbe4kKeZqEYJB9EBzwqTdGmBtWjpKQGu5zkTEr8H2DB6GpI8k2Wfg4/wxV8AI\r\nrDX4gmxXW/JEINncPQCreScMXjnl8ZeYzQItqY+QxK37m2Z+PTxTt+WtvATb\r\nY7Q8Ha8qug7xhvBOgzK4SFF/EICDJ8HajKoJ7A8tFotWih7b23DoQpi16ASU\r\nOoZwA5kv6Y0DHyfQhQurIIcrTLaIT0waeOU=\r\n=g59m\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.7_1665181560628_0.45417700690912133"},"_hasShrinkwrap":false},"0.9.8":{"name":"@slashauth/slashauth-react","version":"0.9.8","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"135982e1404c09e3ffadfde13439f81e48c64903","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.9.8","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-374Fz9Hotax28TJFRtj2kcxBcv3mtAodQ7iS7mNqTBxNMByioF3TtsqgfbCj7gfzKxXtQhNmbI3geW2H0WuTEg==","shasum":"6399661c393a6a05246f892b2799385037a989b0","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.9.8.tgz","fileCount":194,"unpackedSize":2118596,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfhOyNQJfFUWrM2YcpshIovW7UZpXVC1fr5+Er4f/WhAIhAOg5tRUB5/7mR1SCVcCbEqB2adaujJQf27bR1nazXIR4"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRKh1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW7Q/9Fm5ZgR5u6p1Q0FtH8ApBB59/GuAQrDXKbjqGLvdMwaP+3B2g\r\nhML85cw4EvCwD2/U2xXs102SewdAvbd7eN6wOidiK3Qqw4Bokc9OLfV5maj+\r\nxhCXqeY/NUqQ5VL7XnGlUOShzDT9gJqz5gSR6IJb92bLDChEIz9sPvddL2sU\r\nVAI5JyoKok19MDNMeYPFmnIjGQLy9vfVV02YGqVcbHnYp4UWdW97EL2IGooe\r\nTPeO9YheH4tjtqLtd2C+Kot8JUcPJY8diubIXrhiSon5sNBNAeplgxhcbO9N\r\neCpNw8YD+8M675EKmGmdV087dHjzHoU6Xg58a/zqh1KLTDxbBJEzAZSJSsj/\r\nygfgb99I+qN4I2Hw87Fm+BAwBAR/BgXGVRNSORa7743wCa7gX6dODoW7Lkkk\r\n8qf5mow+Jne4A+xNuutNFUuZGzLaDs7LsPQvIRtXAkRRz+6Dcf8bisTnhsgM\r\nNb/GKw1FfaF/61FfFLFvCSaT24ViZEf1h6Mpgkm91gUG3KOE/8+7VP9b3HGv\r\nnYS3BAjDTK8Ot6DUZ/cL/t0s5x1V0REJF5iR2r2WlOkMcQGKcwe+q/Mvbvvb\r\n6QfX7Ta+XocDkAx8E1VtMps0H5w6hCSjmXJ4P8mrAzhEuDsgrk/+qqyjaBKT\r\nMinbsCkPqzKgTzjMfsODRgK6mOW+LQfBGJs=\r\n=HDbI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.9.8_1665443956806_0.488005775853408"},"_hasShrinkwrap":false},"0.10.0-beta.0":{"name":"@slashauth/slashauth-react","version":"0.10.0-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"f2c350fecc734cf8b624bd32a1be28178dadb921","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.10.0-beta.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-je25szThlzmp86XdGnnIt6PNTmL8YFUn6bcnPJN+TDK21s5+OHgLamrjiu8TGgQ4GjZUMoenKsepq8S4Zc2cKw==","shasum":"ed15c2fe433e64ef7e9175e6e2ce9cfe4e4c8145","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.10.0-beta.0.tgz","fileCount":141,"unpackedSize":2067639,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICaQ3waOc1sXSNdTSeXbK8hSJtZ5uOQwehQX4vBAQIoTAiEAkiBkVc62o8pPAn3WZqCmy8UAmcuv8hKNv9ZfsnqwBkI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSaMAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFUA//ViOXqeU4JKdKfzVEWGwffF/WXso8Xmv+9u7aphzYaNMllDGt\r\n+wsZw/pTqECAwDTbpIhX9T/EENCU6XF6dUGLPZoXsIRWAvyV2WRFqwckOs6m\r\nzqdfHFKUWsH+fq2emVnii1wIHnHxBA0yftcqN6Bmtxraunz6QMcbIkz5ONjn\r\nvz6DUA7F8pqrjHaP53RaZCuvOsgdeRyrkM14VWGvKJHo0KL+E7x+njmD+AbS\r\n3mO5A0kVoBNMoNwpjiqPFyZ9kt2UzeGypVLhBXp7iazwzVWCGYLz2nkhTzbS\r\nI1bPzu1yYLgspBeoSjlB7oLowT4ja7DOrGI2t0PPV7X6wjMTHJkllHsKr0d6\r\ndUuNWcBWUhd7rZsGelBUuV9F/mYfI3Pc+meWIKhtMKVA/fiZTRl1zpZ7KNTk\r\nFkZrWXzIaXqGtHpeSwOcINlY/uXMcNI86FBvQsoBwBj09MW+nohrVexOivZS\r\nyGkJyG7ivNLNjVxvnnfmpeWQvgFdLT+CbMjZoWGLPUqOitamRX3hDIWRgsp7\r\nCvyHLWfSDB5/nGQlFNvx3bHLOvYsTQTWU9BY6M7PNcnT1OXxK1vdNYvBuLWI\r\nJ6UgrdnYotPlSmyO6D9mVIcxxolhZLtewRt2bHVK6TrXzmD5axVjQoNxhpnJ\r\nrjqv10Uz56Vi1tz2zfZbOpWUX98HoyTjlik=\r\n=5d27\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.10.0-beta.0_1665770239779_0.7081487921988192"},"_hasShrinkwrap":false},"0.10.0":{"name":"@slashauth/slashauth-react","version":"0.10.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"12a75d49857f3c4b18cb2618f8b1f60abb53ec91","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.10.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-dSZG/BfxqXGo/LOo8HtqzcFIqtW0U/UObArTvvp1wbi/fPlgBiz7A3v67w27apEXXLr1XZdkzxc3d7Cj2bvsXw==","shasum":"310658517d53f93043cf7d95cf7eee8786436ed3","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.10.0.tgz","fileCount":141,"unpackedSize":2067632,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdlwdqgoLOfSDlg4a1YFrOuB/rgaPXbMVjc1SoM/QGRAIgVnQRpSjPpV5haWiXJBdfbjvyZ668XUFTOZqxyIFrGHs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSapqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoo5w/9Fx5YIx7tt5Wpuusqreb0goXKnNEYg1J9JOJYkxyxcLrRcuqZ\r\nEa8+RJQdm9ISi53h8WZYQ9h0WcN25W+11DzoXcimu+5Vw4rnfY8CHrRQJKk/\r\n8WGRtr5LaVul3YW+/YmNZNEj93Bp73RtvWzrCdp8XRQJ1XaHePvBWEf+b3Ew\r\nj9M2l91YHvZtTffP/JpR0HkIr0W1tQ2SHozgVywziww3Yn6JwVThtCNOOU3X\r\nPyl3FHPusJgOq2sVt9AnoC2CZSACEKAA+8MDWR/S1OIBmQXcy3zaCqADdvEg\r\nvP87eAAbrMfALO3rzljrL62N7H7IzkuZ4Oz3Fbx+FgfrCQZWwAKMBYm7ad0b\r\nNpv0Ej9tSQbwriZ6QinQkC04BOl47dufMbi6DJhL8fZifgAOA++BZ5GA1NNU\r\ntcGelzhkkmBdjBkwujAKaub13QpEFk5kkyx/1/iZagnq/OgjBbGJ9qaeVgcr\r\n3yk/7T5YDRWW25WLDFDM3i8HBytChKv9jl97sYZJEU4GUgDSfp7GCZX8gvNo\r\nq5OwKN7pSdPdufRdAcsZbuDimDJFX/t0UxBJTiImKcgkmfpDvW6d1/di7dTg\r\n2mN23TppI9syCUHqnPJR5x61Lrhiz3AHYCX5YOCv3S/17iAPEmFg9XObbxdO\r\nRoRj3/t6WDHiyiWbRQIcqzzYGskIXSO/kaI=\r\n=ocNE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.10.0_1665772138030_0.8174078747736107"},"_hasShrinkwrap":false},"0.11.0-beta.1":{"name":"@slashauth/slashauth-react","version":"0.11.0-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"b7777b5e5d9943b6bcfde873588e3ff68b982f74","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.11.0-beta.1","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-gtbGC54lpfiVQiMT1zktN+z7Gjs+7lshF41HX673C4pbXshbtA4/5u/WPxemd5wL4G2GKjQ88lGqHxr/2C6l1w==","shasum":"9e1a88b4537578d7e60461967cf78391e396b67f","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.11.0-beta.1.tgz","fileCount":197,"unpackedSize":2119323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGV1R/2n1D7XqeDtyJEUe4D19uiXEEQlBAFEVThML2SwIgSqMHdMnldSLW1rmUtK7x2bLyqTqHuC/l8CuI9+uAYyM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVzyIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHlQ/+PUd5o8bKZWTBgIllie1bwm+6CzHvewrCka3+yJt2SFLiH3UB\r\nxM5nbalP0p82rzoSa5cDg9cXxZsngZvYASqif+WO2QrUjplDdDFNv0pfOp6D\r\nwI7szDv1rs/cFdq9+TRV8gqs2a59nI+E90s1tI+u7Y+d7WE3PLZDmQhac8tG\r\n+htqFqLzH3X7ix1WR4SK3V3sVtZmW4xkwB6+wTyRkkhHyEzsowRblXzrdLMO\r\nkRxGUZilwtn3j6j5698gLsJh6TQk8h4mSi+zSdUmbzAvKMCWitTvE3RdQINH\r\nq8ofNZXU8ntUxHJSzyQEqW02L8Ld59gOq//a4Ymgn/HZPtUb3JSIIJPKQp/s\r\nTw581K0JzN2lHIzpKDq3qrR2brAKJs/L1e+KOnhQ2wEKevcLfpx9j2m0zHlq\r\nZCTy0DAXDoeHHVu+HYQCvW9dM1s3W4WdQeZ5w6OnHUQjfb5g2rKshAtJkIRa\r\nPlpDO/ERKjgHQR1Gt3HQ2gb7ovhUIFq0x5+PMRIBXzZB1QsMpjm0HnO1pnvv\r\n37Dd5c/s6ezHwWDA7DFUYfw8sTt/i0fvD1Z5AwPlkbfl9C+sdwTyzIE14och\r\nIZKvk369EN0hg8WZc1y1RT4xY4ujS1EFBFejqF1WL6nIKKkWxjvltvdAAyxc\r\no6S0azHLPBjlH6b7+yRY2UzWXiWZ7pN3KhU=\r\n=Frys\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.11.0-beta.1_1666661512465_0.08663825863967922"},"_hasShrinkwrap":false},"0.11.0-beta.2":{"name":"@slashauth/slashauth-react","version":"0.11.0-beta.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"b7777b5e5d9943b6bcfde873588e3ff68b982f74","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.11.0-beta.2","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ADnqsL7ONTqR7y2xdJUARfnl55kDeYPXkKeXpoURT0lt0wZfsO0TOEPeeEpE9/uV28H89hnaC1o17WZO+HreSw==","shasum":"1808d47e0ff9cd6ca28b72b8e0b48727ff4d2e98","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.11.0-beta.2.tgz","fileCount":197,"unpackedSize":2119323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1R0fDF9PqBqXeCXMeLiLhHsepOEswIjtsWdq/g77yBAIhAKL+4JGSrfNIvva+BCCK3xfPZ+XX1EXsh0gfZtx4Rb+/"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVz1mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqcA//b01dhvC4qlS9vZHT3Um2aDpEfvuKJ/qAvo8JrADldwZ3SSCH\r\nUo/EI3bWpZSo4zCun3e/vQMq0rMn1BB1Gu17/clMwKk9iQQ9nOeeFe0nb/08\r\ngs2OjqAmhyQlDOusglDv3Cz1jBwyPl3k/ej7iw1NuYuxs03ftDeiOM6b7Wm6\r\nws1QYCWLN9z6MTvgMePwDSpdR6PGMbD7x8Kct3nX3T52Rf//JB4TS4+5QmDU\r\nEU1cPQzeAviiXYhpPvXm0KL3M3CZ5mVtOd3GlaeUGNdbiKeoRleWL4qR+/3d\r\nKVZYS7vBIY0SFFo4EAiG9bLmr9Fb8C3mIB/jUL7c70RJ6CxaI7DZoDh8/9Mw\r\nTcBiEn8aD6lLnVLoPmdSXJUibqm3HX2OlqGKNVUKMHucTOWJ7FXytbOC0WHD\r\ni/ZmL2jZZaQF7PYDLo5L79W2WgcFMkaQYbN9S2+mx3HiUQ4zhnMSLw6YU+Am\r\n4auV8C2Kxf3U4cuGpZfFk8974FFNPxJDMIFMJEaVvjuQZvtr9F56n11/4R8O\r\nFQu+I4wRWJkWH99gP5w9eZZnNgBGv+JP064qSER/e27UY+JRDXxWm7TKbH2d\r\n2Ez/S7krxQ0ZsXyjtLSNhuakRcPxhr3JpdbrCci/R00//S/9VVP2pWKAYIlR\r\nYImAEARFAXP5BRJ8U7JnqUksZ0q52nleV6A=\r\n=2mO1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.11.0-beta.2_1666661734439_0.1284037055824121"},"_hasShrinkwrap":false},"0.11.0-beta.3":{"name":"@slashauth/slashauth-react","version":"0.11.0-beta.3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"b7777b5e5d9943b6bcfde873588e3ff68b982f74","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.11.0-beta.3","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Dt+AX2lwPbq1As12k7EnCyo+sLpUYUBm3sXXwQi5rhH3i2UVPhrCubp1chtiv45jAR2WgTYJ7IkAlsjbprjn0w==","shasum":"bb67d6a3b528dcac21dd02eba7aa95f103f716de","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.11.0-beta.3.tgz","fileCount":140,"unpackedSize":2067161,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIChsBqag0BuVygDhnH124KBbc9YwaBH7af2l8D35RPx4AiBTeiUsgy/Ep671WXBQaEatOUoFlazsg1f1cVYSEOGn+Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjV0JcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotWg//dOiH/3D2GOQdNpMmrUUE/wWBkHauEdQ4HvX8FqM8CS4KA6Uo\r\nFWXZ6VIlQOlNLIPIyhKmY5GOt2KilH0lw3r7XHqBYCv9uFeqs7dvQRHUbkfq\r\nOagqLtz2G7J2OjK2US2jlxVOt3BLxR5CQ2qUNJ0dHGWyiiyYmXVrEBsZMCfl\r\nIQISifItkdx5iBgZpmCskvpxaxx9k2dFZf4TR0M+bD4MprDEIinHmcP8ak/B\r\n0k2q5rXmTPD/XYh4sRR/OazYFmj3yQar+LyTpATF9fmQJb0wSyhnWxoTw/+L\r\nG2bLCKBipWF3mU3vPECLBO4RRSkdtvzYt7lbVmB+jLMlTteKYvX0iFK/UMSQ\r\nAl56k6VTF8b4umHaqLcPofv1TSHoQFsTE+Pi7MxoXKsrB9fOE+3xjzubu+3T\r\n7qFGJIU+QG/0oV6NbeO+3Dvfcsd/4bU6I5gsaW//j9lTWUHt1lM780BJ1awk\r\n0NRilFElFIbTNgU6V720hpJbu8kW25S1xcyOWvzYHfMTRJCd7dZFV7s60ORF\r\n6RUJFreCK6qTzS69d3PFWUroQqHpeSZN08wAB9TbtZUAzsTMCsp0MJxLs1dW\r\nIy7BAXlNlE+rSjYajxCeSP3taRwGZcINF3HAcFXVMjEv7TATJ0lVIem3pqa8\r\n8ch5qTTxlsw8KP/knls/rrwnD93rJdHtdps=\r\n=/ZBH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.11.0-beta.3_1666663003946_0.8886015173770643"},"_hasShrinkwrap":false},"0.11.0":{"name":"@slashauth/slashauth-react","version":"0.11.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"e13e24afbdea7baffd9e134235bf2cb25086efff","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.11.0","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-LJh2fPGizhW2UD8FLyIFYYL1j1E7U1WnhgEhdUxJGRMKBsic7j6huR7fEOi4kP6uVXfOsZWrYCWheWLtnMJBWA==","shasum":"cb843e38336fbc1dad642c42d635c289d51e53b8","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.11.0.tgz","fileCount":140,"unpackedSize":2067154,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBUxLd86sy49cS36mg6ZaBTuhj7v3m26t2KSjDot0lZRAiEAt+lQ5DSWfGG/rJmS6S10ydXWh/PDt1fTYFN+3Z6+I7c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjV0WTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBpA//QFHYj83w7hYd5lmku6O6Y5p82UflTmCGHPOG/o+mLEXot5VH\r\nH+Mk9QfQXd5rAxJaODCmbA1mgvdPMP9rb/8v7IQ+ZK9B3IxMcytCl5ik/ip+\r\nyhqQN9SrOFi1o956uTtZGV4c6BQmeEDhSsxGv1ub4P3U7ZFTLjYrqEhsNgjj\r\nnoFk16KJvOXN7jcaGE0snDFsSIiINMOl0PavjMOT+gwOmH710pW6aLnZM1zs\r\nGnG3qz8H5g1b7UaBcnh6zEF8J7xGMcusKMRT22GcNW3ezyxdBAIPBEzFNE44\r\nPup9kNf0Vdam11l37YPQ2wYcVB8bjD/pPohbHWwBGS2rCWnwGAH9cbSAe0OI\r\n2jb3qB5gd8wJm7iMBMacyAqxWOzbBJjT9d6XxTgwQMylzQ6tBlheqGAX4dNV\r\n+2z8a8Ur4h102PuK6QgayvVUUlaEkOyMgqZt6dJWSipBmofSbbv8nVjLhK1x\r\n1wIhMFObBOKKnfHf8HSqd6NZG3CPYZ15wXpZu/HCVP5heBdGOgY8sovR46X1\r\nQJIKU1Nb7KKtZTkl8JRFS74DrNaJhda0rS3H6Ovf9vJmeTjKB4BwgTceVzUE\r\nFJbcYfr5pDhLHUvVo7FDCZAUz8YgcsIAk55t6X6j5yTC0uxJSEJVwbHjgtvP\r\nLIKytvEVEVNws2fxX/egWa996CSf1pY+tdc=\r\n=kuUJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.11.0_1666663827718_0.7960399718050766"},"_hasShrinkwrap":false},"0.11.1-beta.0":{"name":"@slashauth/slashauth-react","version":"0.11.1-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"56a71e3e28ed4fe8e15fb8696402b92bf180c9c5","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.11.1-beta.0","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Ku+ZwsE+OC4eLolsV+Jw6PqW9gMp1WeuURb6wTrtEA2oNrLntzJZjjeCU8dhloNQGvASqniYjdyTHVxw39r+Mw==","shasum":"bc1579415ce14d330b42dea2dc5f2632bceead97","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.11.1-beta.0.tgz","fileCount":140,"unpackedSize":2069740,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB7s3LRHg5iyGsGDGNiFj72DCPJwKTwez/irCpOlbZXtAiBp2CD4izjCzGm7RGc243+gsyIZdRRtvenSqVFvGMyJiA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbTcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWvQ/+KOpJSqczvyQ5wjK/9Km/hRPRa4+MMrFXPMSz/Te3S2uiiuvT\r\nIx9fVV8tuDLOt83GW+Wez7vfrynzKoONdJt21iEUBMGO58QbvCiRYDGBN7g7\r\nFlapoB2NjgSsB8abBe3zxkooXS6rBZD+qf6dh3EQ/RBGhBEZciDzK0pk171R\r\nk5n7Dg01iMasZ7fzCcUGfVlrwPbMX8a08TfDrjhBdxg+4zQmfPH8SMN46ThL\r\nrwC7HnRh2zzmvjcVl89wnVddg5HSKpcDOOS5v89Lf9VQuyIkuCjxGolYb7Wq\r\n/ZeNnuDElTC21u+H/Utifj/fFyelLL3W99l1oBv0HIxiXuFDy/47lENh5j95\r\nJ/zPh81b+2FkiHMMXPh6m17PxM3b89guahsN/9JH3N8gjyNAbr+IvExZLqEP\r\nsy2X3TL+tqckTN8uHaisbtXYt/iAMaR742j9R/JaZIZpwC1MyKBX5znd5Yiq\r\n8hcHq2Z8/7UfFWmS0Pg0im4xIJGS15KuoNuuqqmphW9JFIQh81m2qSq7tZmc\r\nrH9yvRquoNeSSeJ0ld3eu2UrS26iIQbtLVVCtAf8JvZ+Bx22A7XOfH2F624a\r\nuf1TksA4IzZxT8COMsTGIi1+MipRc+1zm9IKxRHSd9uQUZKBOwo6WgfZmCQO\r\n79rLh/1UNIDnwgEztmGewbYkYZR4+gOjsiA=\r\n=F7oK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.11.1-beta.0_1667609820419_0.03260499292041219"},"_hasShrinkwrap":false},"0.11.1-beta.1":{"name":"@slashauth/slashauth-react","version":"0.11.1-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"d3aac649b9eae3fc2f22d9a10f4e94de78ad8a0c","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.11.1-beta.1","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-J6rgh7MtJ2AAv/WW+nG9lwEWLIQFA9nPwMoBEEsBnMAUPBLNFIoFuOkF88N2U6Jz5ke2d96LQ+14g97TZKv83Q==","shasum":"1d98059aed29bfcd3fd8c5fefb1a3bd722c6d7dd","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.11.1-beta.1.tgz","fileCount":140,"unpackedSize":2070070,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaWtvTF17Q4ils881nDcoMqwcoQTRz1lwjmuke7sArkAIge6Iahl76NeI7CerVWjB96J01+nEAWCEbOpmmkwOldl0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbquACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJCw//YSjgAJhQVJiDz++h7QB3VIoGgCVpHRjqAmmZQywSoN0JE7wy\r\nNH3Stmm3BYR5jmi9Tvy7P38A6H/SZC2NAPE5Ob7QfH1GQ3Mip1M/aV+bVYh7\r\n3KXb/uI9UgFWPzMIjdxe0UExqdFLp3WwovY7H8nAy3BZvpps9R4W35Gw30Dg\r\nc0IneTldmS4QuUcAU0NAGhsgY9m7YH7bty6TeAnW8r+C+vj5O9VO18n+neEM\r\nudzjzQxC65E9mphKfC7wcE4yBAoYNUWKL5l5Q0SjGEtmUg8rkIFaDAI8bGU8\r\nZ2ZP26q+XjG0TZngodveDBkswgMbkxJKcDIrvAweK7TNDlZ5gijWZu0+xFzu\r\nNqBq/Z09U24eERZmd9eAhEVuhTz5v0WgHumaMdzVmLhLiYSalrRNVv9FfAIt\r\noCeUB5QREU5Lm7lDayVP4Qb0++L7xdPk3MDYQH6ZvWcsoxPXf1J9dtF0O9fd\r\nKgtLysg3vWDvEfcoJc8Mw8OetXG9g6oUU0XU9rM9gS8vGgHSCjzeCYRmZ2S7\r\nX2H47ET+JRa+6EqLmKILgsaXiGKL/LUUxTvawmFLtRWkr1UICIHaOISZlgj8\r\nVHXS7BnYogoSwODm4X1MthMBfpe0HJWwiuT1iYRydxEMwl/OMBNgkcBF+veU\r\nvOh1TR1YL9eximkBUzRnMmZwtWa27+BPstQ=\r\n=Vp8v\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.11.1-beta.1_1667611310655_0.917907208185635"},"_hasShrinkwrap":false},"0.11.1":{"name":"@slashauth/slashauth-react","version":"0.11.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"90134a1a2b5b37689179a47e99b6d2f4e139fa01","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.11.1","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-sUbj9t238iCfswBirNt+4WSzt/VFWaL37i23K+cyz9wNoalnZo2Xy2n6qQaCz4v4ji87JMaZGt9fnHEbAN1qQw==","shasum":"3678f34d11cbe2aef5c16665c7714c8657c92047","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.11.1.tgz","fileCount":140,"unpackedSize":2069737,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTi4r1QD5k38aXAavQ1ME9I84tb4Wmq3Eiacr7RmFBJwIgd2qoyaMBb7aieYn8K6PjNESRp1wfabWi+D7R+tlvxMU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaV0cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpn8w//arv5TFM+ImExNux/if1pWhoimI/RHt1BqeW4cbgWw5NIrmyY\r\nDAQR5jJnRGHq2EXwmc7tCnsuHjLkztFDreezsfj8ka58xdguxtLVLkztASwU\r\n7uqPRAgUye8ifFgJvWxx5xvVpclV9/DU/X6m/vhbWod1k71aVJXDe10jcUcA\r\n9hRUiuiUadX6KTS1YTJwTF15nO9xqGE5hQ20N3wzdg4MILFbcZO7XyAwR8Zs\r\nyn2rox6TjRtTqfoC5onVq7fSZ1gEAAzt7Gt0Y2tIpshoujB/Js3K6XacESpe\r\nJsvLFESH4od4lUT7UCtvuIWfkB6Lzqe7j7nwuYcEuZci0LpGRVm+HDf7Tst+\r\n6KqRp66W+SJFlEat0Ge4TMjC2W7T1RSuwOSshIMequ7a/oJdsZbcAaXQtUiP\r\ni0NwHog5qiOJFsGCQjA2fWwA1yLqQYYFtKKbcKpNB0Tvc24kyLcDyWQL/qnE\r\nGGxHKnHWeODjPOZdB/sTOB60RZ+z76LADPYApiKF/8kSqc7ItnH7KwY4Xy2P\r\nJO6e7sXi7GduFxSrs4oYNNuPrMVroBK9cYpj5GXt5ntiKPRgdTrJGKSdhA+s\r\nB3QZKCbGLqZ+F4WH+j7llGdqbxJ4eqcDVsxjKtsnpLKSGLlQxHF2yAuodq3J\r\nKJWkWsnJbZaw+sZaSNJnnv4yobuAcfYN7kk=\r\n=8oOO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.11.1_1667849500056_0.8047151933576591"},"_hasShrinkwrap":false},"0.11.2-beta.1":{"name":"@slashauth/slashauth-react","version":"0.11.2-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"90134a1a2b5b37689179a47e99b6d2f4e139fa01","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.11.2-beta.1","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-TvIAiWFoUR0KkWrAzbvfiuevYglAchp4CPWbVomvQG6tiJb4qFERTRi2ArfPJRe0oXx8H5GhwUMJZq6Lli8erQ==","shasum":"7ec0b2027e4a1b737a6d2bf4755ba80bc7926e66","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.11.2-beta.1.tgz","fileCount":221,"unpackedSize":8603668,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXpSpF6p48qSJVC/FoD8/CqukNSWiZJfPueCMWF2RH4QIgY4+LlCMSVQhUGiVHfCZKGYV8cqoGpxIWLovbU8gB6DI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjay+CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoZw/+JI6CBKabytkqqDArB14qBLzaayCqgzLfr0tNAwrT5ZZVt1AP\r\nGEnOZ6HxP49DHWJvluQrDGnk3isNO66fimIybPX+zhC9pR/0+X178mxO9nXL\r\noMJ9A5RaEesspZhMeUGLPsuGeWPDv3dmNJEMeYuYRK24IvCfTuJE2CDxnUhc\r\np5iqevtlggbTSy4xojoZV5RGInWUQYBeI0DJRLvfmUM78q5MBuN0CfGzbtJ4\r\nIjIFQI2SPWSR0PKSFoVGUEVR+TNziDjQhWRcY+KY7fUp+U/eCbRaiRfTgWp6\r\nLUjzMbHipzf2RCiIgZ46h4oOvzukCN15Bakb7FEXTPu+GENjrXYP1qRCmBFC\r\nMwe67bXi+Zlal5kdvcmQPq0cfhfG7GZjd/EcldIhDPMlC8lxPs8NmZr1lbpU\r\nCQ/VwDkOgIX39+Wo6pD5Biurj3ZjErwnoO+cfybAMc5FLWLB91iseu68C+EO\r\nVRh6Jvhyuboh6Vl7U6+kgXdZQ9+tHlz2wJmu/UFpEbgzSdjB8h5r+N8LR3Q1\r\n4zWWHlswZAnv87dqmoftZrSAVCSRyMx+R9ORbkAldWxFI0riOgCZ2dzTk8RW\r\n+y2Qhrjjq05nRIO1Om+mpf3n0MU8dunhbfn06yT+NrQM6bAm+cjFUpx4ubd3\r\nMiDDsTdNBV4mQ72QP3jNjSmPmZUBtB7hWwk=\r\n=uea3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.11.2-beta.1_1667968898180_0.25220541000989405"},"_hasShrinkwrap":false},"0.11.2-beta.2":{"name":"@slashauth/slashauth-react","version":"0.11.2-beta.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"5fd8d1d38a108d9bb68952250a6de045d182f064","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.11.2-beta.2","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-2Sxrw9JqMBjiD9wWr3LVLEa/vVJO9+LGIf40T3206ZfMcZRo2jDfpJi1KrxirtFLiKtvawwY3ehTcppN4A5jzQ==","shasum":"0164062eaba92101c921e6c97c856905990ec0f5","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.11.2-beta.2.tgz","fileCount":221,"unpackedSize":8603845,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA6hyVBDWJrfl8sPtJjOg+KZhhQqePQxKKbmzEycBZikAiACmXLBjjihbXKJhzE+Li2wen3l5zy0L4+kc68Z8WGbdA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbEWBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN3hAAkLCSL+qQQPxyI5KQXJa7Fo1UbcwMoBchMz0n8AQMMR6umta4\r\ntRlLCFpwwTgf/OAyh54Z+PBsrHPHcjr2TMUNvlbE3lKCIQWYe2u17QGBPQE7\r\nG/KCCrkHy9NxyQjvjIMFA83m9xtDs4x0PhxujmcyXiXIUOMAhz2TM/Ql28ng\r\nmur3Y1Otf7Ww01t3ed/2CmddzwEyli6H6i9rg4/mDlBpMzVlGmEjqsyOXNIm\r\nYsU5UMoB0rH5nuAyxM4l1FgIEvjUeshS7LMPhVlsKQ3qTsd1muQg8/8irTCi\r\nbPmwZdkYdmO2u8GpVwbHrS39YV/NKCO0h/7dd8FmN9z0V6JNgLJRxZrTc6Eb\r\nHEMaB10BJFQy5XmGrczJKBqwwgN47kp3N+LjZi80hrEFLC+73coFowuz2/Tt\r\nRTytr5u5ADTJ6BxGBRFKIFB0ZpAdSTlG27FPT/zHa9A5zlxzGZpVk/UAno7K\r\nZIh8FcGHUUfqOL+VRbaKVzi3nT5FCXqEh72LlWPQyrJqdB1JI+GMI024D17s\r\nyXjvb1uIPYSZQhWO/a9lcWbRdfRXqq1x0ScVXPbrN81O8nn+Lcw6VNgvyK3+\r\nGfsacEGUG8yblgKa+XYVYkwILVqrtJc81/tw4Vi/c4j4aBatWwm8DXz5nyjl\r\nf0aNShj5S4Mpqsj9iMJN95O7cZ2T6SCsESE=\r\n=zSuJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.11.2-beta.2_1668040065014_0.908909479031448"},"_hasShrinkwrap":false},"0.11.3":{"name":"@slashauth/slashauth-react","version":"0.11.3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^8.2.5","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.5.2","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"24fcb312e4ce3ba9ea3c8193de2eceff93b228c4","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.11.3","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-+YK6BAJZ8HbvqNfNOVMArR1Xhwz6EgCwIAZJ0Lq4qGyoKLbWgrd7UiqWitag0cJJR4x46A0s1q+zaBgHvC67CQ==","shasum":"735c731dbfd405e9259213d37311ea96cec13ab8","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.11.3.tgz","fileCount":221,"unpackedSize":8603838,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG77ZCrKozrJG1kG5n2RRfP8jr+BN1KKiKjQYMwA1TcUAiAX5YTSBVYtVvvhrhQFr+U+VyTKg6cdsoiVrqXh+aVxvw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbEd7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9xQ/+NAj0j1sITmSbishRqWs4C1O5k6hxCekHVli52ObJx1awEMSG\r\nIIfLansQ6HKiRuV4zUvSRSBx6xuUyJUr36vXeTLJ+ozwK+TmzRs227lkLN3J\r\nhs/zb5CJCZ1kmGeuUEa6+BTyG2RCqTBeHaTzUkPotGvEORQTcuXQpTNKhnVa\r\nGq7EW4faiDwDvi1AWVepTwdVbV0VO+ujrF3NL+KUp7g4SQpUTdq6AqVyiSpu\r\nYWjbzik0r4b0jZlumzcD9DqFM/K8p1M+31rHZ2yrpghKUdnd7Lqp/Pm4scpK\r\nOZag7ud6xr4Do1SmxNeiNw6pIWTh4Pm9y/am5Kc+sgq9xPfpX5O9BtT1itNK\r\nlDgj5FtAS0xsxJH4MJz566o38hFdn+wXG2tnWSAtIzaVm2vcFE7bKu3LX9up\r\nIlZSOE4QZWz+wHcpp4Bsbgxmg4cn7K/lDA/xSi5ZVWcCfH+Ao43SFOw1QTkY\r\nfA6Fma+TLsFBVRiUKtqb7g6KJeXFd7fZlW/8j4zOMWKSPE1K/Ghc3rQSdST3\r\nDnFsg5OtExdmOssQ+p59guNCoDSfteh3dnWcd3VsqLWE11uCdPg+R9YDGJ7Z\r\ninZcz+PQVK693hsDGFg22ScpihPVao8KN9Lizpx1zvvlURYHbEbEu4igkR8b\r\nQyzEdMp3/i7fFNkxr02WJVV4OTItsZrfMQ8=\r\n=fUO5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.11.3_1668040571129_0.32118687949396185"},"_hasShrinkwrap":false},"0.12.0-beta.0":{"name":"@slashauth/slashauth-react","version":"0.12.0-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, defaultChains, createClient, chain } from 'wagmi';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"132a807f3a80329ef6bac3062a31bf6b8185ea96","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.12.0-beta.0","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-WwC+YZ95zL8TIfXNH7/SYBB+9cNevSAMenpRW0n6Aw9vku+d6MbotLMkbBsVfcm9bPPk3pl9aUJ2XTLcEH/XEQ==","shasum":"bb270e94370830a6c4582091fc2d604856580535","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.12.0-beta.0.tgz","fileCount":142,"unpackedSize":2079112,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH75/7xpgpma/ehZkqDH7YGrWfUbiHd4OiQOWUMeOv7oAiEA4fIX2qEFYwA/93eK/+nTdAzRE1H03blRU/LB3es9wyA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl7t6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3PQ//XJBLCc5b785QsnG8tcWGXMqvDZ0utJK4tlocLoVUSKBNnHkr\r\n1E9pP+RvdddNirET6fjxNPsziVCuZSNa8NBkqaSQDXI9xBEKHBZ4Q1Ql6jYm\r\nu0Z4o1SPpaWfxtQfITWzml2bDMTVab5hmTcaYPdJUWLqWPqX4TbLeJK0bR9E\r\nBTc9jgQwtOpe9I84Zfq207hr7QpYSaITuJCZABK5E5zoQ5QAXSLUfQ+Ab8p6\r\nQcjni2RnY0qrwAruGjChMRd1p4jdDohTxr+G2Cs1fjvKhrmoedNXo3YBeioK\r\nDIoD1H2A6jXfAOZelu5kP8ba90rpIj2z6LHpr/GNwprNZuPM21oztZuE7+qs\r\nKwWjBR4hDLp86pcmFLgQD51jNHyE4DUNtfGQiUh93LdEIh1N3dv41TtpA1Dq\r\n/5TEuuA3ubA8jOR0GyhYo+i91blzk8JaDX24JsYtABHWnxur1kwH7rWnkLna\r\nmMWi3AQ1b4xBKXA/VNwAZ3O+akxelqNek8O95JqQX9AIDHpSxh0kbW2/U8np\r\n+NcUPQeImFzJBndjQWwHejHdEcvTwK9dU7gyomxbVXh5BGHv1pQyjHsuwLwK\r\njwN3IVYfLVXYverHrKFORvxPYQOOp5PCsJCHWkiH4t+eFUz8ZrvjBtZJsQWP\r\nCudCX0br8cW3rytsn9eFkFMfXue/AfsWi38=\r\n=ndiV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.12.0-beta.0_1670888314240_0.4323169120484358"},"_hasShrinkwrap":false},"0.12.0-beta.1":{"name":"@slashauth/slashauth-react","version":"0.12.0-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"8725be71e28bb6f7ddabb75a7eb877618deb08b8","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.12.0-beta.1","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ibD+AOHpdVdK5dFHv4mQb5R09Y777yXED6dTieGoYYWpUZPHl07wYd6pPY0lkaR6xaZ8nBr0AhkqDz0SFemGuw==","shasum":"07b6023d61f2dcfa728781fd46c9c33d83168425","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.12.0-beta.1.tgz","fileCount":142,"unpackedSize":2081542,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1AUXl2genhcomkn8Ss4jfMKqPQM8uy+9VZFdbVZdYJwIgH4qUeC3Fl70d018bcPo1rHSb/Dm2sgrQITCFQv8vrbI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl72ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrV3hAAjC6qLrw1Ep1h53VSCCB879Zbe/HYXWhasJLkaSkxJbF/kgkm\r\nTDAYVRekunxDFB+z4eKPf1hP7QfooC1nfzOVu/8UjoAXMzOtW4xEK/oJR1x9\r\nQbq9nNFu5P2emvuCAJefCrcDvdIaWd933ftJlLFoTEfYWO5hJaHVlR7DxFF5\r\njCSFwhuskw7cIlYfWncpUIp4fGRGaX8bKBm7cDcHlEKXbPRJSVrhxWsYZAOh\r\nHN3brwC0xNZi77Cl5cEzUJUBey12k0m3HxjujdjsqmsjXKRZHASQ1DuYNb+T\r\n4qdiO/73Cr5kI7GGff73NalaZsdvdXu3D83hCFos6vR6zwHBty2A0zKCvJle\r\nQ9AQjFNslvHRrg/pFDfJw36JQn/RC0622BXwHDq1DBoHFMWcOosdIQ3G4Kzb\r\nPYz9dtjg/Sd6RmDyhRWtnFe4GaQrr9o2GygCcdTqTy4yHFFzWRJQge5k4fra\r\n8YsRH6c3wot0DDSZwKA7x232j5PDyRwRw8ETsIuGTdZOl9CRI5AsN/KvSURs\r\neI1H6p6IkweMTcaeMKpoPcq55j82ySO1lY+a2hVXDEQ7ysRiOkWM8VV/Dnyi\r\nic16A/5wYu6AXwsD7vcD/6wZ5SJmeLsGC8AUVXWmsMLRZYUu81a59VhirpEz\r\n7lU1nsVYW/t4hZ2j4G02Jha5pxRiJMkRrnw=\r\n=faJN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.12.0-beta.1_1670888856796_0.8275576393584096"},"_hasShrinkwrap":false},"0.12.0-beta.2":{"name":"@slashauth/slashauth-react","version":"0.12.0-beta.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"8725be71e28bb6f7ddabb75a7eb877618deb08b8","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.12.0-beta.2","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-O+mbvzpsXAls2Ws+KAmPnboWU//qxwFDS+jZiw2xGSOMNSeAtfmbluhhZWShtyfTCLcFOhsMotSYi48SYDArKw==","shasum":"e081456a04aa9de12ce23d79876c95207d58fb68","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.12.0-beta.2.tgz","fileCount":142,"unpackedSize":2081648,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+VRh1qFl2tYTlkZvz/ar4tR+rfA5PDXGMOGgwwHJQ6AiAwZAdMAMzStNVFPSt0dL/zbPxfyDhgWL1rB2kpXGCdUQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl8B6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqkuw//evQQEzvtj/PDh7RmiNKdu0H4ve6ga3SHdn/jgx5KxPfm3v+6\r\nynDF8hZR9XPPfO1QvOdqMZhMryq13EdLl3YYDQ1/2RbBL8KMzHhLq0N5LjPZ\r\n+YdNuDNBEQ4hdsq+1zGjk6myxpeVlfSB4xJgufVONwACfP3Q2cJS9QQSZ/L1\r\nTC+7d5ZAPntOYspXiviEGC/Lcgs8iH/j3uo/6KkQKSexAwkspK4nJDQRzz33\r\ndQSk7wLSJyXCIxtXdv1koFtLb4fZchSmeNJk1ErzfWDcpM4h61SRLJjrvO7r\r\nZiIUy02n0cp8YribNBcZP9MzBrW5s+d1S9TZ7WPF+L7pjwzLee/OY4qFW8EI\r\n3FwdfjyD+8dpw4+4fTtqnARUVcdIKK3TVexTnKiBem2Ia8bDtmKXx7B4goes\r\nzkVVa53F/dJm9BWpU2DORZmnQmbSXTjDmgTxx2pr/wJc1kn2dtaPyS+lP0S5\r\nXJYouQXOQwUZxV0oKDYsV1hgHY1w5jkEp7SR5HnYtsp3anNjtqMsNTW+VCmV\r\nlv+sLk9Vbeb/ay9I8v4DFaojQHO1sVecaOvXdgODVLTpyR8WEGyB9fwW34Ao\r\n9dB+zIN7RpcDpy6lYHTUU4stQUH5yYYLprK3ohQv9GikdwM7Z6ygZybiVuk4\r\nlju/A104q2j1/x9YKUqF8d/fT1owzNQRYAo=\r\n=sfFC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.12.0-beta.2_1670889594061_0.5432734616763388"},"_hasShrinkwrap":false},"0.12.0-beta.3":{"name":"@slashauth/slashauth-react","version":"0.12.0-beta.3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"024c463bb6f875761f582990d3949f8b3d68af84","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.12.0-beta.3","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-rOJ9tcvSzyRl59oO0XX5W4Eh73kdJiKJWLLnoZRRiCfxu0j2+BYL2ean7nYqDS5W4z16AJEsRnP6rwoTMQKA2w==","shasum":"b924f61cd118ff9132815ab4a75d32f2408ba711","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.12.0-beta.3.tgz","fileCount":142,"unpackedSize":2081828,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQ8VoUWwMW0fH6onQdH3lgvluYozkie1r1UYgj1BOIWAiBB4Jc9C1gzHIWo1LWfs4DcWrh/rDVgjYeJ5JvK94IdWA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmRMVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqO+Q/+I/PuPEf9MKsn2tx9ESeAhjM8o/24ltzp60UTEn/EfgclwBuq\r\nsmEAbE0cHlfqgbBOqKLulyYqzh3eMOQGsBnjoU6lfHnEl3422HfsSKDOxDcr\r\nwC3E9qE3X83saIMZ0KIScqjkJBSjHgNZ9dKCWONe98O8Mc39762w6GKU/RUc\r\nwg2J1QuNTdcpfvStJX+/V6e1yTYFPZOizZFyxFT0pg6xYWZ0AOWD5RVrLsHw\r\nprbClRYT+I97eUaJcnYlZauw/agqASpyajnt+mJGHMOCjnvGs0JcGwa4crLF\r\n7dmERqnrE6PbGflv8v6a0prMBhayzdV170tMFx7xXnjZac9+QdtUgAHpetUZ\r\na0pEEFTEhK5tehSPScTM2KXgsQzhGg0zD0bwHy0eJnAeqB7AAlHXk3+EV47h\r\nDJf+n+hJykoyd7Gf63bK2JGO/2t9L5sDdEYHBoXbfJogxQ21q9m/P3o9aS9R\r\n4ALAZsf6CEQqDc97oy5wggzFTW0CHDf0k8DIJNCmQWQUP1rEQzEMfTjwjTTT\r\nRdrsuNDqQRpUgbxP0briFdtHV3elP2bS7Ak8C73rxKvYxcjra8chOywrTg0j\r\n3lbOqzTDkTIpgXnPjNteyC5JzCf8mlZ+gBS/d0ylVYtnHAb5gBaOTFoAPG3t\r\nJ4sxUMg/mciNB5pJoTIf5uV7ZBHUJ53VJLQ=\r\n=baAK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.12.0-beta.3_1670976276871_0.07282556865453138"},"_hasShrinkwrap":false},"0.12.0-beta.4":{"name":"@slashauth/slashauth-react","version":"0.12.0-beta.4","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"f0c2676ae33e5efe97ceb81db1e5ec01593f5caa","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.12.0-beta.4","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ndH7aipdq/wwZpB6drZhkV9Q9tyF+I+V+58ynwoxLpLXO2s1yREyyYeZGcuCzMNZrKiH+StgXtydoyE6EAVWyg==","shasum":"61aa40454e2565a9f5300e7c1556460887475066","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.12.0-beta.4.tgz","fileCount":142,"unpackedSize":2081836,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCvh9plJ8aMJxSQcBu4fRwizr+3o0ZIn7NuMEwOPbc7gIhAJoGDPBkWJIi8GwnSgXx7U+suoxqNDBUG6cO6WQHfCsE"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmhz1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjohAAm6FMSJKHFWTQC0FPKMvjbXxSbn2P4nltmXXm62TjWsjv28qf\r\nwaUsY4Du9/Eqf53zY8NI4QXmIhKmfnkZMOUinJCSF9WDtU9h+dcDqNuZ0FGq\r\nwI4ThV99kq3iuDCaSMOqEozWnX14KLU1QYY4TgDaX5OnmmZEIAPRF5dCpSqr\r\nYb8WftZAluVYH/eePb9sS82lI3yxzYEDBPp5S8dquz2bX1U87D9Jiw2DUcm4\r\nF7qR52yN5V8BWOidA4hgjd3RKNOwKIth96lCM2spQS3Q8l+Aut3rO0NmJ1Qx\r\nHSPhoufvIW2TXup1k3pcgfNaSlqAlOM81C9CmQbQ1oqDkJt9gvqrAMWT9GTM\r\neRSXT0IvpEnxTsf2299oeS8M0gNhvKtp+AHFCZQR4GBaD8EVf46fm0LwA9xp\r\nqAdrpodCx0ZSqB2HNGjgTPqtKztaAyFtk6ajVXpnG50N1Kxjzf3qa8zzWFI8\r\npUqKPq6Z32nv6ogjX3lSMBYH9+ljxUfCRJI5AOV6rGG2TMmY9A7tuGX1llax\r\ndnUkSg1GKl6O+IwoOhuncvphPLPlIVZuSfcdmwz1TIwuIJI8TL7phdj8PeWU\r\nLwASAt1cFYxMWRV2pu/1WrFLGZKkBF0RW/QIZA7mdZ9jFd5paO08ToKu0ZeA\r\nkDIqm97+Xk7hXmL6cI0O3C3Lvdc6WhEIcPE=\r\n=ndwU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.12.0-beta.4_1671044341387_0.9987262776629806"},"_hasShrinkwrap":false},"0.12.0":{"name":"@slashauth/slashauth-react","version":"0.12.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"9cd24aa4dda39117bf6aa571fe2c3ee18336dc47","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.12.0","_nodeVersion":"16.13.2","_npmVersion":"8.19.2","dist":{"integrity":"sha512-yYP11p6R7ub/4qGeiKP2ym7n6AsF9e1jZvLVMkISuJpOIXjOBVs+nPYGX3QgJzhmPsBWjfYbv4RrTyxQNwh0zw==","shasum":"2529b1fcfa35fea686675e4f7b8a73e441fe1bf2","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.12.0.tgz","fileCount":142,"unpackedSize":2081829,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRa2hCzvdgF/yrWWZXLEkxvUKk2TZ/dmsvbjjzIaERNAIhANa7LSQGpA+WBjEbF5k2QRJrly3Qb2Ix2XKbrleC+/O4"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmiWFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnZRAApRVgBg+VaDtZlKOLACuavdG4sXEbrytDJkOopSgZbnDWI3Kw\r\nR8rzqKMaKJeeP1ZTZgpnxfT8mSAVe6AhqAIGqAO/4m+ZgTwA0y1uYc9xbW1g\r\nrviTHqLQWztIJZ5e/DAY5HBblv8tvsow4praFz9gmCVNLThhFAgjaOMsE/HR\r\nUyX5b/hDCK0kq9X6An7ROZk2V3RMMDqrBqJgB4BRdY7uLXujifgOiY0uf4tE\r\n5BMowWCT6HgilSwIA/+6YKBMHsrQVo4cOmP0XJT7YF52tUdYqv8kYZ71o5F2\r\nmmCcIzWOB4mR4L/ifxf1iUJA2rvcuqngHtjjKN503x+1hMtxhBoaHIl8HBWw\r\nj77hvXtpEmkF/Zjs6bD22ieHlo9Krw6uQQEn2PVMBjK0doLnIq98Qkk/sAbI\r\nNv4x9Ht4cf6BFqUH+2sXmLlsVz3dTdUv36Eu0jOSG24mJdagFfsOwui34L15\r\niHSS1Sdq5r1Q3mbNbMDD9f8XVoAUwKnRD47eXIJwFAETFbbtR20VQnag5fDZ\r\nENgoIjImeJAzdSIrcIKv90zdQnt3B84wGZ3Hv0JOaFB/6MGc9eNrN0FZ2qB5\r\n4JKY+l/mJYXOZC/BZ5Kk/n9Vey+mKTavIC/bwO2PxgoQiG1BdULDrn2qEfAA\r\ncCh3gPvg20LTCYLSd30XkdTFuiMUDFME16E=\r\n=3kaB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.12.0_1671046533736_0.8461199583236478"},"_hasShrinkwrap":false},"0.13.0-beta.0":{"name":"@slashauth/slashauth-react","version":"0.13.0-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"28b331be6b357f17bb39a652df1367ba618521fd","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.13.0-beta.0","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-70/2Y9bQzKrlypHpJepvG0rWPC1VDyNQ9RUzaIjTxdtiamYqLHoSrAERbKu45j9mKd7r76aRCeem5YgLSTtKpA==","shasum":"20b07087ac82940fccb55aaeb00a5d87ee7ca759","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.13.0-beta.0.tgz","fileCount":145,"unpackedSize":2166282,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSe7q9WC60Ckjn9XQhJaEfKhtvi/SSEBW+nAeyCnIXwQIgfX9jRYWUSZHa1m6kh3YDdmPJ8b7hVq/ffEAxVAytEKE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoif/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSJg/9FJ3FpeAUQUJxwtGcWWKbeCwMRBxZDbxUrI/H8uQ9qsU6+X9e\r\nHxVEOkor3COq+hhJs3r9YrcQaZKhKzQzdiV4zklPVi+dUGGR2B/tLqvUZ9oO\r\nNAxtvOHynS30BorL2sXW+z/GWF4EmwZBhFeIZcePD6hYwiK5Ftm+uN1T92Ws\r\nwzazRjGohrK3WxZBGCUXFWhKRe5VT+eQOlH0LFaf/2UKk5SQICUESmCLX36r\r\nZiDhHZdmXtUk4TAw7bkuE+WWqq2iBCCz9y6y2b6snrZ9OybtrmzgZWo4tV9k\r\nfDG35wW9DQq36SJxOK9SKkXO6nNmL/1zmeLiRWgzGl3A6tkA0aYVbr2D7fiS\r\nHSHhkExThiSGfNR8vof7JKnqfoki3v4azDLoAPWO+yFzkgVSS+97kSIftSVw\r\nqTRrDHSwsEZr50l+c5Ny2dv0I+TXkdrWSvwyxe+Svx8i4bf2SN8vnFHU9o6U\r\nqhmDhAkxnb8AdAKmUDhBxG4rleq52UhMsghJUHBd8MH1GSmVIMr0QDVTnhAi\r\nXL4BkPdPrDjEiRBHNUkI4fDjizUMZlxF5iQHLFgDjB9KneS3f37umJwvouwI\r\nqn6l1uHRL8YaDMfdtEDrR8PwB/xEDVE6ZunZ7ov+T3YVHTaCzhHmzk3uMrMg\r\na6aBOsHmc3iKxXVSPhkf2+U6LQSLzrOQOXE=\r\n=5Z6e\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.13.0-beta.0_1671571455547_0.6574080355703116"},"_hasShrinkwrap":false},"0.13.0":{"name":"@slashauth/slashauth-react","version":"0.13.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"f01008072f3a4d14af6f04ca2ad7fae4e83ec9ce","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.13.0","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-mvAMDJOOHlyuVFjZVVLSWVUF3Q1U9m2H9ciB8IN7/Ays1zWlVF8Wd66uYcBZzsequHY6K3m5GZ+0wTZaxRPk/g==","shasum":"d62674853aa4fce61b02f4e4dac102417db48ff8","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.13.0.tgz","fileCount":145,"unpackedSize":2166275,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHx+b/NNt1jWxszLXo6eOPJOCl2LF5dHmx7SAVu6Mx+JAiEAgm5j/ayP5kkiJNESsKDijyVv7oDbcCh7HQ8D6dev/yE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjojEpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP7Q//ZKziRmbm1cs6S325FWVcdd+dRCLYOkGrxvjj4b49qVuJ5m5D\r\nqxXubA1nFs/kf/GOdNRIzsjkZPKZU4Axi+xmdBCWzhWBuXxGtsHjPy5StHNV\r\njoeQCdpJqyF9K03ZS6SS5piH+usiijNw/AbhPYuROS1qcFG3cGSg1URQ6KIX\r\novVSJBXXuImV/IhoL0y/4w09UJNUlNx01TGUP3GeEzEmpJ8IX5NrY1jFRO0J\r\nVTrijcneYSHc9GuC+yI350xY38ZcZLiALiPopzTk/eTFkwK9A0uAqjhxKnO2\r\nDYYF3wzzzvxsCWw3ojQf08MlgQBMeHY+BZpZW4JV1Uy+TQIsFRzi23OswpjC\r\nAifdQDDF6SnSbO1DClOxIxEbkoRb1I6EvUuZzlI3y5bDbO+xsVHc3ZhCb/8h\r\nmhF1HBOETAws5E3ZhsmbqF3trTz37dhVs1RPGBsrHdZQ3gZQUOTuHeRDn7hm\r\nlBRx+G+posWTRGVOt1dMVWgfUq5Ns3qMpzDh7G6li4sc6KlyCJAFzugz9VxO\r\n2eA/nWLZAjDmUTl0hKP5CCf3uyQWOZ7NPwKe7ecjqbaZ5ZhIVsFMyUc+MY/Z\r\n9I9anylgvvLU8RHrcNhCmowKXw8ao+em9kEmfKbOI8rbsANiHXEjhDEl9Eha\r\nKKrve9ugaiye6RXnLiRnclqw/zkF1UcaVfs=\r\n=agA0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.13.0_1671573801649_0.6773988831359621"},"_hasShrinkwrap":false},"0.13.1-beta.0":{"name":"@slashauth/slashauth-react","version":"0.13.1-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"5b197971786692b4385d882396b4645cebe29eca","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.13.1-beta.0","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-5+g1Lwlr6N8lQjrWWU2pbGYPXBjsT+mIgwE/gVjhBPiZlBZAHl+i/7kn0gv7i1isvxMq4U4wRlLg3qOjAIumyA==","shasum":"d997548f65f8718c778b5dceebf59e75e3fb6e1c","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.13.1-beta.0.tgz","fileCount":147,"unpackedSize":2168900,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBLY5hmxltlkQrTBFXSkSqEItPYLT0HkImIFZqewYygjAiEAg1gZ9qkt8jaLAc35GKEvzKPmObenFrOO/12Xkqj1zZI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpPB8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomSw//QKex/zsE75uuQ0oxkbpUTlFNQZ4/TNEjB2NxU1s7Sr/Ebe5o\r\nVuXmVjkiwJSVeDB/JHliTdmSFlfk4FwK8YfAqervgp+sxq7HiO5epyb+f9lt\r\nJlryTlC15Air862iwt8C9PhK4PKdwGtMxEUeug6V8X3cZyxNnbQ6KZC4swiY\r\nv5O6M58nl9B5KreIjtMazTFNr0RFu9hhBzgsI4htBUzsxvH07WXmB+ZX6nWq\r\nXYMxRhi99mQRPMALSSJ+Lf0yLLK8hrmhwHefaybbl2e5AL8RySM/rYuPOdaw\r\nlPfsXjsQ/KeK1CVkzLtZ4ONRcSPfX/gpTODMIqUe8Hu33PC8IAQU4AyBDGZW\r\njvQTEuouE+SAxTbKmL7ghLgGSZ6D5K/o0NO2EedJyckeN+/LNfreaJ5lT3xH\r\ni+xtSKCBkqvLUSLnRwd767hxp9MEmU969PULX7M5t4PA+ym9fMScn/dJIb5r\r\ntuW9BqTxjgvoH82yBDjLk78OTn4zoE7taNzbq8GgK2QIVPerljLO5hu+1/1f\r\n4ED6US7sqniLunn5iRM5/GstpQ6LKOUV3ne9HAB7n/2OBX6IB1K2X2zG8ojW\r\nfCKlEcLeklxEPCzXsxzMrNYa6u9Kk5EHTPhAlE6Unj32JEIe82/3YYnnxg2q\r\nQiobSGiVM3ozp9iWpqMWsipNBb0YS4mldQI=\r\n=NcWL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.13.1-beta.0_1671753852366_0.3087882787431535"},"_hasShrinkwrap":false},"0.13.1":{"name":"@slashauth/slashauth-react","version":"0.13.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"fb8d3253c6f234b03b0a3b51b5c3f58266bafd65","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.13.1","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-aSaYeVBHt4eBS1eIrMu7VJB1w4Vc6QRCeRMJ2RJm5NPMtYPtBJCpYqFoZlRk115sHp9F/tLnPXMg9+lx2oQO+Q==","shasum":"0e8cee7c51c513fe8c50ee79ddf084e551343783","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.13.1.tgz","fileCount":147,"unpackedSize":2168893,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICA4OgL2ix4OSk5E7ruMkp3ZpeCd2gMko9FJz3xn4D5rAiEAoWJ+7CKDvJaLY7/TH3WRtPZtMhaK2QS/cXhFB12hlPU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpQD9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYzhAAlqA7wPs9xBEyL6N5KZluEgjlTOmDS6GxyXvUdnoPiNTaxtxE\r\nEuEJB9BqfrDLPtMJ3HsedRE/Z/FcouBXxTsLqM6rKqMYHJj1NhzTgICNz5Is\r\nAl73BM9HS3fbMoMDp2YaKxJETcfSzLrEz+J3ZhX7YetlJEsi1gHzKoIVz11z\r\niMHkU4bZeie8RjM+PY8UTt0QKjWrZ04saNUdocz/F4Q5QSJ4IGGpLJo1d/vd\r\nyXvgHJdh7gMP3rlNGyq0k/Kksui6Aqa4S5yKaSG9WVXc+dOkRjtKcQg62hiA\r\nA8SlwLeY2+SUCvmapMFA88onQJjnUlzii3Eqr3mg4WaFAnMjgCoycyjzFSLF\r\nTIXLXfApa1iqNOYelJaGWXS4gu5rW79/bkJ98uIEC3hzlcOW0ft0LU+MrFpE\r\ngaDV+fWtTEovVKq5mDYeaQhVKBnFgQBv32YPTmTmIsUrKafRVNMsLrpg2qxv\r\nve4lFkVqBEjbkKIl/phKVYKf0exbb2CosVjlhxiQv+ZPndmj4HsjBGFT3Xs/\r\nhUurwvL3wsUQnuGmSYWzxUxsP4GerrqcxRHFQf5U/ismb7M2+co5zgG+VMhe\r\ncBNR25fSe+je8Ol8YLkCYMynAqDbpKepqKEKG6V1K8JTLTbXgHYwkRz//L18\r\nvB3ppcZi6xAMkYqPQX2lzvoHBl5oxewmKEw=\r\n=jBYX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.13.1_1671758077185_0.2413286948376534"},"_hasShrinkwrap":false},"0.13.2-beta.0":{"name":"@slashauth/slashauth-react","version":"0.13.2-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function loginNoRedirectNoPopup() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { loginNoRedirectNoPopup } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"eff55cb8c0261db61b58c752d107d000959a7b2b","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.13.2-beta.0","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-nM1gMu/KdnclTKJDGFy8emhutEeOb/00I6QOYE/kwlVaRYnFWKTzIBE3jcAb/4qDj3WDyFC1yd0dRww84WGphA==","shasum":"104f00bca3351b6b0df8a36e4c060a7d63262620","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.13.2-beta.0.tgz","fileCount":147,"unpackedSize":2168888,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6BD95aCcEuAl0sENU4ezuKgMjV0jB1G9R5ZbarQaMzgIhAIRgDPO8Vc38jZQvM/e2knHhj2NGLjEKrJ0LwswGxF0b"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjt8oKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxmQ/+M2Td9OvphlkUVobV9l/UUm5fjPd4yPYU8646eKMkL9EogScC\r\n6wKCtg/IizMSceDlxpOv0ZjwJq6LA6LF9CWEc+f/6PSRoMOXtHknB8F7nr0F\r\n27lwfVWFhrEOa00muJYif7kUMZsIDtD3/td/IxLRjuxR8BM5jMSc8pYzNl+b\r\neeKQPsOtJ/NaGAN9qwqFtYwz7nfrXUolrKcgZnZJudzvWMx6S+xA3+OvAH4h\r\nQ6X9bWmknvml/Clt5Ia2KXGsYGwWDLKunPcb9qvb4rjJ/m1vQ43VYmpPERQz\r\n+poWQ9/NcUBVzsa2g5cDp2MXdNiRZkbs7udIGB2D0Hg0+pe+hUBKckiiGn1Y\r\nTnd+UFTUCt3ItUA+s8ygM+gCLEr38grEjOBcJUjy3GS5Nz7ybk/XuVDa3rOc\r\nIUYMuiv1ZzsVedQ07jjgOjlbjw8FApUQ5AbBbllHqgV6/Hl36XqbnIoQLzN1\r\nqoNb4TVHreTZ4C27ILPrFSHo0DtpwEMwJeOcelIe26TcJqtji+GFvNBg0kl2\r\nxTVc07ZVgHBW1mnHZwwcSpmH9IGSFFDU+AHkvo4wCB+q3L8EBjUOoKHaHAI8\r\n/kSKU+LBLWvsqazNaZL/Rmr3esHuorweLoaiWNXqMhzwzMYB5qSKyr0B+7n8\r\nd+lckSOoA5RwnrB7LxV/+qeAuqLg1md9WMI=\r\n=b6fH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.13.2-beta.0_1672989194614_0.9976021273837463"},"_hasShrinkwrap":false},"0.13.2":{"name":"@slashauth/slashauth-react","version":"0.13.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-spinners":"^0.13.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"769867e0ea58d3771f2b866c9d0f6610fe3dbafc","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.13.2","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-076Vh65TlmEfFn1gRUdm2NOUEoiq0FAsL1xCz5AvKSyoXL2an6rZIMQPyCpVCASi0qWOhUitknptQAYZ0dtqug==","shasum":"1c82b20d3dcad4668fb0a90f748d4ec88ae21695","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.13.2.tgz","fileCount":147,"unpackedSize":2168881,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBaaAJvlG9C7IVMmFsCtV9MWTCP7mdBAmbbMbpeUu+sIAiEArmixDo+JN2go3dyVP08JeGdEwNCABwCUrcGboidoy5s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjt8zYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqrpw//RW+NIbNR38O1hGdxbP+hmfnommTOPLDpP3IWWNdU11u7NOnT\r\noAY8WTqd/9lbgrH9+aOmOxY887j5UmgzIyYkkx5XWuNdoJyGIwIJ3miE3Spn\r\nrddlX4ovNHL0/cPjf2j/5a45mCKAb2CjhHaN1BhQ+sqk11tZuJ0CDCD77eYX\r\nW2sBW61JvtzRevPgqDmGJ5jjOOB/9ZVVM1s6O9MejGkwn+iRMMQg8JUNrePX\r\nrUloR+Lw9B5hNnI9yHiD/lCRNPv2Syc+SO4GGDUiWHzO/+4NVPTrvgbriFaq\r\nlzD2cbWPUaEEWGUGq4jVm+RSsECQ2dI+OCQKvdj49H3tRRlKoD6nDYdvHhlH\r\nYHiR5ZkPxik9H0HQ/gzT7iNM5hJNuH9E1b88DFGu5Yzzn+beS7h6zVEbP/YS\r\niZ2KpkrmA5Mfgo1+Q3vnoYXcWe9+BzhGI8dJvBI0cB60ZlyVjZcFEIsuEN43\r\nTCwK/WPUrQxB+V72ftNw+LJJ8YL5HkI33IaGqHnz6nkJspL393ntDLtzAjhL\r\ne0FcKohxX3y/t665D2mTNVEE4jHmSvo7kO1U5vAKvJqOYYtMLUv5+iHlsbu7\r\nE3IfYu4sVUTXxvqao5qHpPklX4GXeSPTuCL/OE+jnMbF0CTqlW+qsVWHLTX3\r\n9oddSbX6m2VXIjM911MSvk/FQvxo9buxrLI=\r\n=h+6s\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.13.2_1672989911892_0.8241370366133909"},"_hasShrinkwrap":false},"0.14.0-beta.0":{"name":"@slashauth/slashauth-react","version":"0.14.0-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"67762241d5924d96d62cc4cb0c67f3bf39958d42","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.14.0-beta.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-fOFfR4E6VoBpNv47REwOk2ISVVLmgynC9p4f7CKHLcsJR0SvkR11xqkf4LJfkT0pg19XEwx54m05I4ZzHt1AaQ==","shasum":"105e926990f55f97f3a2741dab57d74c8f563644","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.14.0-beta.0.tgz","fileCount":146,"unpackedSize":2163976,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJoThV8ErQvbCcDy8crZXG2u/JDo6N154g7WtXOroIxgIhAOsk2oduNxeLX1dPPmWAZTc+51F4qIj00DvDhoicXf66"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJjUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpI3w//RKk0U4Ax9e8g/wpZchfXY7hFUQE9E5IdKstezyWdENeFmX3X\r\nK8M66YVt2TJeoIlaCqzFqy/ddVhLrSvX44rk+2AueEFP1CcPYRHlDwqMe7JN\r\nGorS3pyRrOYE6bgfdVOlsPx21EoodKw440IdkAIrhmsu2FgmhSKfbCyM0a5K\r\n7QHUaBSW8IMVNsmDZwHuySc/bhtweO/XL10rXeo0nhKViP0WQlAOMpcwhYq/\r\nqEQlj15ZfLInpgZC66lqqtlb8J6i6AU2VN0o96lsyHB8Q4qa8MCP73YQggBR\r\nfNYJxzWSTwkJWQA/8OKUf6zyWFHHjoxGNPpnpKAXb4nbYujr0+BgXWJEPZQH\r\n6vFn8LVtAqgDijdKXNzdhXF+pR3w6R+LVWtYExICaPOnd2e7hDPWpmLtB1EY\r\nWgaTwWZ/0h+VeO+YHRhRAFSTUmC+gxbjRXwQVx5PyznM5ctRxWfKWN0XGdJj\r\nmA831/aaAMG1zRwAphYzmJfZ1bhYcmRNCnuiBgfThpaMhGSi4JclHeuAvNVH\r\nFzWToOXc0lHcuADar3Vygnojz9UCXHFAkdGsOZB3wFK2xuhkktP5to8NTdwX\r\nF41gSC4jLErnN7v8gkQzuH+Tua3E3fz2MiboQsyCKLgQVPG52du5ctlNb2fM\r\nxzD2fSqjKbXUPY3XzhYbPyw3UzEpTRkaxMI=\r\n=enCH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.14.0-beta.0_1673304276014_0.5142712369848614"},"_hasShrinkwrap":false},"0.14.0":{"name":"@slashauth/slashauth-react","version":"0.14.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"963a828af5291fb090996c8f40b1653c9a43dd08","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@0.14.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-hX+rTZykar41qG57USpERMQafEQpnWEummicBOIJZwD6+QgNILa44ilaomNFjFh/1+/OdjjcnZJ1ii4qtNks/A==","shasum":"9a62366ab476d2e9ba7541214518c5bae536f09d","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-0.14.0.tgz","fileCount":146,"unpackedSize":2163969,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNDXH0/MlOL6JGHCMyqHKrLfGZeiXKvmfhxtz8S6VV6QIgdQwBKdAdYdmTSfyXc+RfkFNh0s+/fnqwh+6y8koTO78="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJoEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdbhAAnBclSZK39BFbnZipfPYW/92Z1SEfKOOruNQweNq15hwj+yB8\r\nAro/WhfLR0WkK7cebVo0FzJ3GUmccxPqKB9n0e8A4q6ThU6SRt7fX+oS6GhI\r\nDJ4gxj04h7CM/jBdfGEbSV4EJQQ7EeyveevTn0LCOvxsZM//raPlO/nrEaVt\r\ntYcj+VyyUz/O/ZqZ/hnlZNlt0o0XZoXcqo8eD2xwAFSjCHOK2DayiNzX2l4i\r\nAqzkzilen/4Ltk5yNeigXK1/Zmj22tXfcPtM1vKFzfy/JeAqMDAWjff2f9Wm\r\nO657kLJVG3SUtidck37jpVJf4nLb5k07vMtLsVIjoISU8Cb40IgxhKFe/4Gv\r\nMvYmoNoiO23sEHbSEu2ARakPdRrlbC86HcdZoYkIJqfOcP2Mo7id9n8Hhs1U\r\nrJWqFt7PkJaogTNf7hwHY1oXtp+OCpM+DpR2CeIfe45WrRwW57cmrEpoy/3W\r\nSMVJgYoREXx15pQMF4SnqmbT3Y2JpUOGW9OQBUa02CKoY9Rnt79qwRzFmlsD\r\nddphvn6L7v0Db59I1E5VP+2Cs4LFC0Tgj2zzuJ2F9JZN9JJ/FaDOvTbO99A7\r\ndOrA+tioXmuG3IwJiypmJ+4K7obhyRvd7w6Chid5ZsHmVvQaWpVRnms/2ZP6\r\nTZuGRd1spvhHde3qFPZ8IJE4LKpTtLcREuw=\r\n=QRKm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_0.14.0_1673304580706_0.2999134785629691"},"_hasShrinkwrap":false},"1.0.0-beta.0":{"name":"@slashauth/slashauth-react","version":"1.0.0-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"3fcf66434040e27f3e06165c2830741be68b1c53","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-beta.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-9HRyjCmSV2OA+E+YtZ7gaNP8w2KPUuMox7mfOLP5G+hURr+xoXY72Qqa16iasV3FyntKqjeaaC41qd60GYuCNQ==","shasum":"d23fc7aaef2334bd3713dd52bf062061df1859d4","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-beta.0.tgz","fileCount":148,"unpackedSize":2168572,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjXAGf5zOVfAq7PiNzudXq94DgGMiYN0Cy/DdGBCcZJAiEA956mYCrqQ9y5CPZiya0q9UPLDkY/QV2RLVxB8m0Pdvs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvOUjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6eQ/9HcHV8Bjm3310+ibQKHjNnbDJ9nB+Fpa4x1mMwbOhRxnndv1v\r\neoPCh+9rNwVhlT275LhRCecNvYDbETzl2wzFHWvw5mD4xpznQu3bGeFPK8hi\r\nMA2zdf7cW+dvy5SkIhA8Q4I151gkS1xJF6vBkRzX8LWHiM+KDIgya/9fBghZ\r\njCZLEMEaowWf2Zw1Fgjyq3UprkdBnX3TC/+vckqa3xDUeuaMx5HoyU6mpLIa\r\niwelnsA8T9muoI9Vu28mJd5WgOzAG56YF/bLR9ahLLckTvfAyZC5ClHfRpv8\r\nttRQrNl6nRI8tPpWPh6ZK0k82YSR4YQRdSNQjcctfzgkPTWQamO6yupQAVno\r\nvQ0I5l061sxG546y9Gl2cv2qkRmEvEfrpbDAzD7QBUfH2PEvqPvPCJFPQPcu\r\n75b/vhSAaGL1NpMv9KirPOGjQl0eLpavfQVMzb1fKQt9kqvJsDO4AJ5V0QYZ\r\nqas50AAQ/cq55TDc2nO2h4KqbFcnUH1xknELiBc6lyG9F3WjfoszxtzJHsih\r\nEa0nUkjwoIH9Tnkoth5OeBcDMtagAz80uHYeba08LYfFt0hmNHi54QCFpaib\r\nAWCr+896F/A7x5TMGvwZiMy3tfE+echoUnTo2NRRG3TlmD7juvuOeSjQtCB8\r\nUhxAs7JWBx8B26+oFEUNcEy4+fUaqX6CGMY=\r\n=2/cb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-beta.0_1673323811236_0.914015973107362"},"_hasShrinkwrap":false},"1.0.0-beta.1":{"name":"@slashauth/slashauth-react","version":"1.0.0-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"a0e4264d40c0a181f21b02ca43262f2f29b9a89c","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-beta.1","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Z8oDBBCQ09Jn/pMqU2Q5ydBqCgvErIL+C9a843dFGydsuea0IoezyncY0QaXObEn7OpqAssoAFKl2zcUKxSLsg==","shasum":"f006c3660351dc2485680642f67c61740717b030","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-beta.1.tgz","fileCount":149,"unpackedSize":2168725,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/3QJrp3zi3Py9L5nw8Aqq3EtgeM2R2HFeWf2VPFczWgIhAPTnhRH8/j8uxg4g7geJwzsKheZC+ZCYUyRLJq4rU9ax"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvddaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvEg//dbw4j7Rcw1xaLkhAhi4c583ZHdH1Bq1HBj7pgnEaZ/jxcmbW\r\n6RuNBi4FFtRM1YnmBQVBtDsR5mbAeeQ6Ro4YrwpErPvnC18bwX0RyQ7WKEeB\r\nXKIGQtnIvkqHkBmaQDnBEJsW0ai7Uo+tgIP1VL2B7W3p7nVsveGAn9vXglgz\r\nFcKAldKy6h47evIF3zsIob+lNUn6V5noD7DgXaiMhzsQJnO4kTVyLJan0H1r\r\nJ9LkCfimNFCMGe9aQOYOROBmagw0P1dzIUZGObE1JNz8QBn3xHDGcJiVuf9s\r\nfG1oVqm5ZAqdsyoX9zpItgXgierUrpoWy3Fy/OQDocFimrAzkksu5rMFgWJQ\r\nR4FxWC9RpRBKXO5vc6w0GxCD6rHryx7LP1e/A0t9F8+84APGP1mFdrQ91vTk\r\n+3DQFBvlMoLZx/Hf8Fh1wf6PMe2B2Q7xVsG18zl0HYuHwI4AJFqpfoQqRcbs\r\nuvPh4W1xjrQRAQC3Ibx3oXLhfM3ab9fDqhscJhk+bpkjZ7oa6hgXZ9znTdk0\r\nIunOYu/evvF/OCWX2XSSYRr3aoBy4BD6ubmpPKk2gWTt5vGWji3feD19TrAJ\r\ncG+g6goEdNhAfupNTi46bo8tYyCIOkfEoHrQ/eL3V48s/CJA6LWlZqMRlrtQ\r\nhs6I8SQxvTf81mmZ41OYkfHTpT37Ln5W5Uw=\r\n=KM15\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-beta.1_1673385818567_0.6255824674637853"},"_hasShrinkwrap":false},"1.0.0-beta.2":{"name":"@slashauth/slashauth-react","version":"1.0.0-beta.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"255e403b78f57e626a1ac8c572e693a6d11b6110","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-beta.2","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-qUDEebm782lvSGaQODjfAwovauSAZRDbe7wNphNmrzkdsOItcSa14Tb/SaSArHUJvhDC3+drRMs0CWRD2pTT4g==","shasum":"bd71febbe7b414429029d322531c76ad8ba43cbf","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-beta.2.tgz","fileCount":157,"unpackedSize":2169994,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdvJgxaGGsc2naYc4V2+txxw8li4y6iaGb+yMaehejsQIgAcp6Ax3yzB2b5MTt/U43MADGBU0dGgekIwYq1pb3cQI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwMoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo34BAAkm7bgtUqhu/T2BzGA5mYfeyBjlfHRWEvlWOcIIEkliog8OmG\r\nXdID68bDDGXD/8U6eNinXgJEpD1vYkgwFjY1T7VpHJuyOjVcx5YnPd4tHHjQ\r\nCcgJsPr1iK3I6c9QPjyX/Ibn8ANWVl+21qITUSFA8dZOpwm++s4a6I7F8sSP\r\nT2ME899WKFgjEgcNjpx4cI55QX8LeFtX2eGOzGBZZIVU9gtD98e6W+FSsPv6\r\n3Hq0khXHb2vnvIDaccybYeB5Pp9R+vvS2F/Qz5UfAEsRWQaHyjDYUepiZ0QB\r\nkR7+BISoo5mhIbw2GwCNHpX6AQE0C+n/z00X0OKR9xzZpAiy3Wxm59N+QSyN\r\nKEcLtYHyhz+jcxASUaYjT/SdoQ3rohd5h3lRCOtLob8sSe1vv83WCtKESzyp\r\nEd5nd+RKZZqnYhZMtYZireCn70bV045/hweG31hncvfj0s3d8AAfQOtgCFl5\r\ndAK3CXDZuKSW3JwfIRYQJWJipyU/bVTWHPqS4cZXzNUHQXWKT39jK7wgZnqa\r\nXylBZdGiwwWNK7IjAUqosXaw6Vc73RpA+ghvlQi5soEkEtoZMe/HcfqXSZET\r\nmozvLciKQ6qI/jTlysIQihPqNVupY9g0FXGH08QS9xQQxERJ3XEtcqlEXyG6\r\nZoDFsMYrTjJBa/ax0fArOsdkQU2geTCNCN4=\r\n=9Ecr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-beta.2_1673462567813_0.024375882616871847"},"_hasShrinkwrap":false},"1.0.0-beta.3":{"name":"@slashauth/slashauth-react","version":"1.0.0-beta.3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"3a8cd8eae6daeebe86d3695e3e06b9759cf2ac0a","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-beta.3","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-6mKik/tXqScFkTY37gD/R0z37bD+fgzCVMtQzAhq2RaRpnNi9Tjk2IM3tI0Wr/Nj4DA1QaZefh+PQLWZw1JMyQ==","shasum":"6c7f8441b089b016427525c5fd128b9cdc54af5d","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-beta.3.tgz","fileCount":160,"unpackedSize":2170698,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC91qQawVPPFGE6FUTvMcfjxJ1EdCKQhmaV53e4rbMJxAiEA7uQHYzYmsvo4hdAlaA66GGwK2zQmXQPYq3/jTvGxg2Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjv1aiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6Dg//at7oCdzxctGWUkblIPkxCxHYqVlpVjWjE/svfgj3SE2msiNV\r\nNY+fwU5/J6H6aNOacQjxgivn029ApRs+LDHPbzGis7rHU1/ICsjv3FtpCDLp\r\nqN+DqKHnjHGfU937dITmnno4Ow8EYKRFvJa2gOmoCnYwuVcbfp504HES8+rY\r\n6iesoog3K8D15IAxWCNm1gb5p3eSbHD1DDGRv9pdZAX/Rx5Yey0G222OYlfi\r\nEeFZYOQG9h5j2EBtNIFU37wnDwXN2PElh5tMzGMlqCLbtvzVlzc0wnwecPHB\r\nqBtfvqBOr2tpwDEBGCJSUd07n4R+eWNKi7GL5ezVrUz9SOZ3PhwOInqqZGu3\r\nfRwxRQa9K3rMXJhtFSmMqiV6CE5c05IEq13VmnHUWzXa0iV3jtuX078PhK2x\r\n/2OK6UqL4+UCCxGv1L58zuiNUhdecZGZPWHwHNVMkOW+hOJpEHDfHm92xOI2\r\nhMcJTowce3xK/0JjDKS8fBCpcQSLWY2QSu5NhGHuKivEh1izimr7r4OE9ae9\r\nmJ5964K2498LedFoJ4segsX5VZACeXNvGHooStyOyZN4TYR8u5rMwrRbcWiC\r\nJWhjmyZpg3LVqjKb0Q2IfOxurE8AEn8b/gOLKuE41Np/IBuLtjJNzZ8wyec0\r\nvH5lTp2wFf2AEwtyQA1u/gukUZe3hTouCSk=\r\n=uV/h\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-beta.3_1673483938489_0.8290534688170503"},"_hasShrinkwrap":false},"1.0.0-beta.4":{"name":"@slashauth/slashauth-react","version":"1.0.0-beta.4","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"62dd66751d304a3062bed8f0aa7d98430367b124","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-beta.4","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-zvsLoYAm7o8kPDiZ+smRpG/5JOjlXkA281Yp607lHnhqsxYpxkAB0fC99G7MtdAMzxKXav7eXjXiHb85Vz4BMw==","shasum":"56c130a179a87d49de4c933f067672f2839ff998","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-beta.4.tgz","fileCount":169,"unpackedSize":2172119,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8IL4NR9Zz9SSk5OoGZfIlysg/AG0mt81jwZ56GcNfkwIgSRil91B5I4i136+b51rLZpHLGNAsFib20H5acTlpMUk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwHxcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBAg//Ue6KyRtGIucvr3oM0x57skB3nLWJa1CIeRPmGGEiZa9ZERU5\r\nSjfr0P0wSaHQA0YFaL9FCpckGsu14DESVyJs61TTqFfuu8XCAAcpzzjzOImw\r\nfe002cq+FQW9Q6RaeumiT6lpd6goi34Wgmx21hJxgpaMX1LfM2riNHEHjelX\r\nRr0Smx9qapsA2JXJdS6PYNqUcgtk0BsrMD4iHZMTfYKbCjN31P2fwEOxEeSg\r\ngMo81wUSjUgOfHeX6/FUfP4c9/0PKCt2g4e7spr5siOdidPnbruXbj0eRcbl\r\njKo4VylZi8VZs6OMD4V4u1eSOQupcmji12p01TU9VNUkUrTH4ftnmKz2HOKU\r\nbLuWYhT9F5bYQIRZm4Qsfl9/LORrxghuPX/7hN+7F3W6Vj6jG4r88p5YJC1/\r\nsVY3505hhCgTK1ifJtxaPwUsJ+qBhu7tt2ay6GDQeHJIqpciMjhXeAubuCVk\r\no02VgLXe7OzGLQJcDTgzJJpEf/AJgJ/FcSJMmYaOfzkWLLOmx2cZIYgCRf/7\r\nPgzFnWmAIlmmcnO/frVxW2sFDasTdOWfN76aAXdp7SargWA8jAfzOeHnRcuB\r\n8FGpSH3hCYI93xSCygzKeUfjE6d6ar3pIgT5ZwcHP5yzZDJOxYY1zoNljsiS\r\n2wlNKn8NHt/bzRJwN0gDiHE0KdSLrvjjcj4=\r\n=bZyL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-beta.4_1673559131991_0.19841019078941313"},"_hasShrinkwrap":false},"1.0.0-beta.5":{"name":"@slashauth/slashauth-react","version":"1.0.0-beta.5","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"3cc533d3d34050297c60ba66bf23aa2adb4af101","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-beta.5","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-qJmsYjGz0XkBS7EqXRLwjnn8gD05vMCJAVEQgTkr1LtJ/G2M7ttrFN3a+80q1vaU8VF3hhtT3ViR9sSOePtTow==","shasum":"1665b72ddd0a4e592617835d1e4648fb89788870","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-beta.5.tgz","fileCount":169,"unpackedSize":2172217,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG6gC/Q1OeuLJpIaSKglEEi73rjnQmyhrCWx/henoKtAAiAReZfD+bUIzCvFUrVpQYaHH0GPsjKUukGepfnDxQ1xlQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwH5mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9GBAAh5uRBVeQnWcL7Vc2Tl6DYgTOu6lPTgSFFBV351q5HLKAn0+o\r\nrO2CEpMO1H9QXnIGEullHA9rMG3IKd3aW8W9k4jBiGz90SGy/dx1QsID8Xqf\r\nEY+v0IkrxgReeEgRqqniquLGos5eCklNxGbm+QNnScvqJuXE/r9k6zVsiVwX\r\nUf1B89paHY407RlfU4g75MV0AU/MCuBaPbcZBLU8dN6fLfJ6X1rmoFoEOHD3\r\nAI0ZEMbgD3dAZeOjVJ068oQIoUqAinZJhnUJSNQvJ+kbr15nvyn75nwqbPqp\r\nzn1ck+aU/rWOetR3+X1CNYXaEikv170RFIazxE/0GRRJWAkggGmHyN9s34qI\r\noSJZ7DvDiphmOA/83f8OeVT5zB9L3XzoSPI+f9N/cbDuCtYEIf55iJltU0n9\r\neZQ5gB7PBG3qukQd1fUH+vrzKnTCFXwd0iAoCOc+AeB031y9TpmKCDwdqIIl\r\n33RAD9AQw08y4+/Op0oqCvhmZ8dGq37EAK0ZWjn6NZOQXsd03NcsNav0P2T1\r\nfz2kerPE7T/E+ZvX0N3Cvn2w9l4fQHjjEyJGI2RxsIvZVB3Hgy0YjPHFoHEc\r\n7eR7Uh3WIRU34hvQQOsGO/gF5+gRCdKntT4iMO7SlASObCg4KCvnR1AcvOdr\r\nnaR82zRw8i5XrgHSliE7DAqEarosK2IULMs=\r\n=v+9B\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-beta.5_1673559654200_0.38983685768624365"},"_hasShrinkwrap":false},"1.0.0-beta.6":{"name":"@slashauth/slashauth-react","version":"1.0.0-beta.6","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"08d098318cc9037fc30f59bf76a1d0566c9c4a5b","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-beta.6","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-dPmqava/nZek1PJjvWlNmiOT4F4AFDMOsF9AtYLqxd4L3LTDGKGj3nWUSMt+ioLSinFGsa2J/5B991Cheepyhg==","shasum":"bee85f4cb7d97922a810f2da8135773ccca7dea3","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-beta.6.tgz","fileCount":169,"unpackedSize":2172249,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGaB1DpBYi3vic+xxVZYEeugyNwt8f+Wop21frqT7poWAiB5VIJqQMeM5lWbGAGcA8IdGwt/VXn+0D3bQOo8vUoe7A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwH+wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJcg/8CBYnqQzR3UNrOMvkuCk3fDgWwFqT1TboJeHq4jtl9I+9K90O\r\nK6ilEMWqYdRc8w6sZS5ygdkbStq0kSDGiRHqX3VaOrckU5FPqbaIyh4IRYmj\r\nPKEcF6vag9xuPTYoAGs/v2AnPG67koqeDYpNio9aokzbafCR1gptRdPOfa/0\r\ngjG8er7xmSLm3Hc8WiTON8J4CiHeZydrGai1nlROo+/WMT3U8MDE9weD5aWI\r\nbRtzUbIwVz+4Y/2JUYp7VCuYAP3D3RfYjHJQKnit8cSMd+BytUi5ve+Gnu+f\r\nUMQMPIPY3dBQm41ySRTOXBXT80SotdeNeWR3ikE+fZkhqK9IBwQRqOKSiYHD\r\nttPmVaizPv8M80iXLgelcUQYGhc9DWvFrMoms4UeskPZBSAwEY+CADkRgqCe\r\njLI1RWadM9l2mIVF/fGjoSfaGzT5jc04eVIi5lwqgW3dXEywW0QdwFzJPVJd\r\nHksqNI2nZyRFliHada/+zMqBFIU65WvMKzkVX+HphYjD6aSe/RK7d02os1D0\r\nKEDS2TggPVhe5LqAf2Gxpd4hLsU7qiu7UGS77eDJCxOTwvxMHhXvnqPA7jir\r\ng9T7RPQJX23GAM3KCyOgjvlprdhpJPrSfJ4slEjC5AOnIAaZC7paWvXSY+gw\r\nzflRBcMXBb4I0mlS3HJGQ+OYaWOcfFdKwfc=\r\n=aI8D\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-beta.6_1673559984074_0.6502692097091209"},"_hasShrinkwrap":false},"1.0.0-beta.7":{"name":"@slashauth/slashauth-react","version":"1.0.0-beta.7","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"ed0709b8b546d29da530666b0bdceb0fdba221df","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-beta.7","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-KQJxl+xZ8wmVVTAdIDYEbWo01X70nCwG04x2Tbn40szaULltPT3MSBARYFbu72s0UDSqagYAZMxnoizH4Q38dw==","shasum":"3d7886166dc4c63dc38bda2a608ef7d8dcf4ead8","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-beta.7.tgz","fileCount":169,"unpackedSize":2173177,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwCfzcMWaTGt/8ft7gqCuCNg1gnFBq7Ubas2tToUW/gQIhAKrnBxFQQQ/wa4ac4MvYbmT7ORTis6mqIXcHyLedlZr3"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwIDhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+8w//VPE4Dia+aMPsEohEaTq+ts2RntiqAzFe+tjr/OBHtAvDqvi2\r\npSEJ06/K8VpIsnGbcpsiYO9XauOONKU9uc7BPONNXnUaahdguj9r8GzBI9Tm\r\nwGHHVtVl9W5evhLC/vlTh2VQtcvJyGACUy400Duua/1z8NVXElAvQW6liQAL\r\nUBmldi8m2nCT0JYFHCYna9YyQNcmK0JsTvt4Ng2bsz1pxUNccRktTQP1/Q5a\r\nP2mt9sEb/h39A3qsH7NUTWPEmVe20XQdzx0V0nk+SLdtQSR9g2JPetJsVpva\r\nD2PdPv7qbJx+6llZ1qV/TF8p1uvFw0Qh4kqfXgUB3ldhD4jzlN/ZUP65kfR1\r\nw2EIWLkSjzshtwvaKaF682rV3K9E0lVEd2rKCs/Pd4csF/orkWDcmvJyKJBT\r\n4cMXvcEPBPZuggA36gzP7zZjo7nOPopYfMWGCfZj6B7JDvJyPWq1T6dGk0nC\r\nP/nx0pllAX72/TP9KnIpmTipFz8EPKocG+PyWYIKy8apEOJs5ixwwO5OpvNR\r\nPBsLiag88GRLUNQCg47Asvu5zLxcMDoBf7MAGl+jxl3enCAniXFG+wSMB+gf\r\nMJvzAjG90IqXdvF0dAIXFCQmFk3hnIA7tqIq5pFuvwX2tXVO/wAeoTRJaLCO\r\nu5xqujOw45KW8MSCK/BB+SRvTKpzx2DeCno=\r\n=smoj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-beta.7_1673560288881_0.46982497390907696"},"_hasShrinkwrap":false},"1.0.0-beta.8":{"name":"@slashauth/slashauth-react","version":"1.0.0-beta.8","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"974e8f0effc2d1b8e0749f0338215c09d1011672","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-beta.8","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-x2B3Dc/jMvGocAry+75B35EyhohID1Cz6I/M72aiAwF5ff8YXt3xR3ur97tSAKi/ehRn8xPr0FK1Gq5Rx9okLg==","shasum":"318510ef3a38a5d569afb358ce1340eb46b2f594","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-beta.8.tgz","fileCount":169,"unpackedSize":2173177,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfr90h79NdrsWO2CjE9emRUepsd1/2788mTnk0siB64gIgfDE3Jtwwn550U3+rdrJ4T1zMACw0bTcChf8iLL7uETs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwIRCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2aw/+PJJTSDnSdTQ9dS4/B2K+089tUJKfHzRiR3vDWNZ0xPnqh7P6\r\n1jt71UOebtTa87eOD76QsLgVZZltk/eKcqXtWOBpCyMfNISoikBRmSBnQtAT\r\n3sAxDT+5j2l/hm91Q7MLg4mP+HVFRwTDKpmPjLq/y/P3HuZx4mFzEnbP3vnF\r\nR/lsEeCoUwV6VxdAtNGwKtN4XT0bVBE59xZR3MMcVWVNiQWmCK8aOQxO9bes\r\nikI3WpFZf0PXQcz1RQ64sd2A6oJI+5tFHn4iltUe/l9uC7/VyShZIaA5aDS3\r\nzAYdLeHnRgowFojr4UqXWXjpOGFmQIK/q+pVuq8fMBLf4Z/JZWWgjP0E0LSo\r\nMvXP7kHsXtRkpBIOr9SuUm3gig4et30oXUyo31zO6PiQR8m0DWh+1oM1Omfc\r\nN2rAQ3dNujUihz768iYIHxZSqOtbx9efM2E+gEEHzZsHbxCr5q9muZzgs996\r\nwfNK7u3B3tgeTmvP3wBnvGOXXolMYvVR53kb+UAxkX31cLUpAy/TADvDmlXZ\r\nke//WWfx4+FuX6OzoX4wERP3lUSj3/qZWdlW/Eh+Gwq7q33mRP6pdJ2sB1NO\r\n9KlsM6tUMSzWGxGNaaZCzXxacMIGFVbd8PF0J+6aVtIs9t9XL5NDmbm/RJut\r\nZpMHCjV2kMk55DpfFI/sV6R6AKdpF07jeks=\r\n=LR/1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-beta.8_1673561153787_0.95378789884301"},"_hasShrinkwrap":false},"1.0.0-beta.9":{"name":"@slashauth/slashauth-react","version":"1.0.0-beta.9","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"f965c010a450162d132c6faad817efb1bf66ab23","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-beta.9","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-hDDt9orIKUe78Q1n52kAMlPTFZErBnXIWppgt39y5CKphi48BM+S3pcF0Q5komGqzB9fxKazTNRvOCzUtsuB8g==","shasum":"a2464a7195d4f5ee2f822786ac315d6f7c4b1e8a","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-beta.9.tgz","fileCount":169,"unpackedSize":2173377,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBFkFCVYS1aDzjhmhcoKufpome0X2cTdmaidexZQnBySAiA/AMIlbClsXJleKy1+z4bgqhS2M9YWtFBs7aZZyb4Upg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwKDlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtXw//fnXJX7WaRtKxEZ5CsE6/0FZP4OAzWRtbU3tK1kusEbdRzkF4\r\nMDS26BIfeh6axJozje3/c+AVWhsSjAmxDdXOG71/Sor27u0/0VCKxMbEWXQk\r\nwa1zTi99Ga6cEjsQKjABwDsTO4YFUuJvyM0vEc3EI519n50LBlE7oQZe2KKt\r\nIGClnvxKWwtLpL9h9zMtPkDSDQm0vuu8Z1VXDSTHZYnkBq/02/Ie+Wu5giYu\r\n/OH/Joa1+z6oS0xmm8Bj2DfvyWnhs5+p9gNorjQIiZa2QIWp15rgoe5nYLRI\r\nJDtn20fK2NTNc75lDhjZvvbyy+53FGqAPW6xnN6ro3riK19itGeq+Xg8+vgk\r\nQXIK7EpCxDqBM3DW9HfJBWSlXzSDGzo7hz5zbquT5ICASwD3tNpq0PWTjkve\r\ndksxcKITzee/KQFS9NXb/4ZXZMHdJni3aSIKSXZhQG5tSynPwyJMG1t8zwP8\r\nmVUUAsVgKrWnhK39+7KMx6yYS9h2Xq3WhzGmNP8ETfHvPl8jVZ0J68lLUjGN\r\nbxuovYqhs69bU1PMrkwLONux2lwxZy5Tu7bm1SUVnUKl4/7p21+FTtPyDyUV\r\nrsneY7kdFk4DMu+DcR0XuEUYoxW5dO8fRf6roOUPRxcFohAYfNhmyFsYFFnI\r\nnFWVMKjdCZOJtE4ux7sRgPlcKNkedHN4GX8=\r\n=B1ch\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-beta.9_1673568485478_0.5923678827134855"},"_hasShrinkwrap":false},"1.0.0-alpha.0":{"name":"@slashauth/slashauth-react","version":"1.0.0-alpha.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"786315ce0c6437403fdbeae524d0539bc2cf572c","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-alpha.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-FzpNizJGQPMRbVhIU1cAEKvXLyMruVj09KIpNrJPcKy3wHvsxmUqzqf4dyoCWFiiG/eb+vT5sFsxPRnvZsrYyw==","shasum":"74040b7083afeed50981314df19848ecd4e3f4f9","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-alpha.0.tgz","fileCount":169,"unpackedSize":2199933,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvoaLeQPHZDO1YUsh3jhOBfOgrvb0puXBMm7L/ifFlYQIhAO9yFwkJD5pT+iIgTTa/ZIvcYjONFE28z7UcohtYPOeV"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxxWrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPfBAAm8RQN9QU98bTroO82xkqkUmNn1rcdJJ1URl2WowMemdqmTJR\r\nrszpvcY0GBxy5xAXTEejEhrTyPbE1PwRfruy9LF2ktcsHpfQIB99A6HSIlyA\r\nwaLfn82AqDrIcku1CEG9g7wfmKjuBLfV3eVNOQ3imChyp/w37a5xJQ5Ea+V+\r\n/iaWOkoJAyR1DwB9RyEZM+MrvcHiLsu3/rwheO6wYanVN62jm7AZQryGpxzO\r\npF7Tz3zwpoLo8mFvqQiKfHmCFq+Vf2lRaunI+8soen1GCR4IDx/oZBRqat7w\r\n2NnMgnoONQ0ESlwplEBaE4oU7s9OzO0+aGATH3oNyE2k3xGV5/gS5GarwGV4\r\nR0eEnlzDQDs+QAtzh5yVlMbSFLNDl2exE01ShX32hhBrOFuBPru/DzHuxd6L\r\nwfjgYI8kqMWzC6XGpUXetx8ipkqg/AmKPXy1OLZF2u+kdKZqihFNoMKq7qir\r\nT1PuwJNV6OuGsuMcGaCL0xNjHa4eA7aCuc4/8blz+EqQ3/Aa23Di9VSF2hbJ\r\nXUjDLQYesqYKt5FX73duaLulzIK+7KlmQxiDe/EKaTNrVBinnylNMkBuEFN7\r\n36vbqI5i7v7jaTOxumxygDWysqSjBdYuKL71nJxfMkVLKGF43xtJuGYjO/gZ\r\nwyxUkhi+a8/k1DGSCArtFfqnhaKLGenv8Fk=\r\n=ViBe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-alpha.0_1673991594968_0.7293585327213445"},"_hasShrinkwrap":false},"1.0.0-alpha.1":{"name":"@slashauth/slashauth-react","version":"1.0.0-alpha.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"9284795bb5d7e3338a00a2a85e2a094e86c73bb8","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-alpha.1","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-mSxu7lRQSe2UD4+F63qHsPan3E/WTBtARXuzXbnZL5MYYd8tyoqcxP1IwW0MuUcnddN/zNLxwXEmpBRUkqqWVw==","shasum":"889a29d9eac2da5a9c0717640d5f5d9c1f8cfee1","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-alpha.1.tgz","fileCount":169,"unpackedSize":2203341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDve6DS9lrNLTJZMzFv06qCbl0zBPIEO/DnNZrWks7hmAIgApJ4JqwwH2rpYWy+iv3Wz1vmO4PdnAnBKI186NzHhtc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyAz+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrteA/9Gkz+CrZnd2PBQwAWvJuCQX9Ge7atX49Nrn5o4j9ND93DAJEw\r\nuFNCfOhixTVpsdJF8b0pFRLKz3lh5W8TpBsXsz9DZz87L84M2afFV/MKH4nw\r\nKUgMsBc0Ef+HA2KNk5M06vXszL2WOySN785Ru/liHv8hqJ8+SOkqVmQzp5N2\r\nRUtzyqXe7SPylEU9SjEARUMD+t5TY2wXwp8GtUQ27GzGRE7YlMjDFmdDMe8+\r\nylv7T+m9Imh/C0m3yOLwDs/ahhaGvdVqguT9vDi8CXOAMledEd4i8AzDyKJy\r\n+6fQFRA4nYFsvMCzEU4RZOyupC+R1ZUnXOEfmMhYWzVdB4RAo2qoAMpMfUgg\r\nAUT8xtddzqSbvX2rb95w/4AdOeekHM+YUtl9O/aBeexwBg6XWr3B0KBszzaN\r\njLYgEjj2rDgkgdn16bbDfGw211fBWwFSFI2BJxQMYll5wAKcyWwMq89hVdZR\r\nFdg0A/98Hy9Q+hFUVyPfI4O8pUmOhRGw8uhTAnD2cBAmoOAlPxaLEJ7N46+f\r\nutr8xSdp+qkEAyiTIMf6GfbGIVb7PdazOZul7ABeNEPrQp+enXV0QXfwaqQR\r\n8KZbAwd22SQS72n+HNWtW0AWAgXQLhMjtCdJW1Vji5elokwzXbov3HULtbSG\r\nJvqvb83SsWrdlt0lsZ+FUb8t8V5q2R2ZHqs=\r\n=1a8f\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-alpha.1_1674054910539_0.9652032703408795"},"_hasShrinkwrap":false},"1.0.0-beta.10":{"name":"@slashauth/slashauth-react","version":"1.0.0-beta.10","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"cbf30092d72bd87207458a33936c2c478856155f","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-beta.10","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-o5N66Nt3K+cTgC9zRAfDWAerjk0doeBMXkMaQpa8jKtbL8AYrvHZw8tTArGj2boT8Ujn8IHa78haQrBLaPqayg==","shasum":"9e8f7dceb3def6485ae34090352d1d2da457507f","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-beta.10.tgz","fileCount":169,"unpackedSize":2174227,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGcOPlDB5TueOq4bxT/qhAkP7MkM/xzvzs+m8sjRfPTbAiEAqHy2GJ8sNzqjL6opf6clxfRTmXVymg2iuaS2KEDR1Q0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyFjnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnpA/8DDF/fEiuGg56NcbGocuxhnJzJxgg5/ybROmg3BxdJx/+FMmE\r\ng6TQqgEB2qXqa5lSw/KGwbzCANz24HaApnrDpMBJyh75SoQ5f9hshQF6rdoU\r\nayb475M9UzlT3We3py3fZVVv2RixR3xM9IzUPvVpXAIA17pb0uEn3ctKXhyv\r\noUDRNsc0QntQj9zvpewDdW8KheEGh5hsPYlUlsa9+QMgLZAFNHyrzyt0VjB8\r\niuyoTifj2Xi9y5vmKOk0POy5TQkck+twlWZC9OAE4szlijYfejQ1u/cLrQuP\r\nxxW7EkinFHi42n81VzuD1ye1q18nokC7LOKEnp9FTKTdmK0Qe88NjpuDD0rl\r\nLnXbLvGTNRQTlWbNePdIXOeHl4pZE9xaxUDPBxkEeEU0WxLvdp3wjE/xPxrv\r\nzwan9lybCpLfOzCrQZ8PtEl78g5tzdAmqKrDo+P9frH7gZzR1mhZ9e0rPo5m\r\nG+7vIDMP+ja65Bh3aYDnPko0WFsuYWOqNOi5ZvzZDgZYaV+ue/cyd6KWVBwX\r\nRpydipAacwFajBjj0gNRoPTU9XO9nUXM5kQqP9ZUqStBHHoGKZ7YB/wxjIqC\r\nlLhHOODDDp0/nd3/bpWsVwPGJAw3JCKV11ZZroJBKb8oghfxFsgXeO1kXY1l\r\nYB/lfeGeaFa0guYwG1LPx442FdPOZirB6xU=\r\n=Mzmm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-beta.10_1674074342593_0.8959858530980742"},"_hasShrinkwrap":false},"1.0.0-alpha.2":{"name":"@slashauth/slashauth-react","version":"1.0.0-alpha.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"51401a3258234457f61b22961488e3e3c4823231","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-alpha.2","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-dUEAF1ost171m/n3m8h+HTmfcXLVGXqZuG26s6UkAnguhUqKRTJjwIaHYFhip9BnwMBpCHKgT3qgBLe24tTgGg==","shasum":"9826e0993fa1a52d0433cc956a2ce0886f377d24","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-alpha.2.tgz","fileCount":322,"unpackedSize":2298954,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3th4nf85P1iPJ0HASnmXp9HE+Rry6HTKZ1EIf5hCBqwIhAITLmBZqf7dogD3+qQAqICSsHn40v5yT2ryx843pZHzi"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyaI3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjpRAAgIlBBARrQZXcLe5LHyfT/tHbD1ON8ecr3G2z6EVNQfIdRHDM\r\nh/El4lrEUJ2oYU7GJfuYLFh2E6QuNtbtjNJGMO3745QRpZGOyvNROelPVPcR\r\nAHh0YODwHn+hUqEZadAMzrlS3Jvc0EuQ9sgDQ+wWyaAkxLmRicwMBCPibJ3I\r\nvEMmCQC53YYg2w/ieCW/3BF5JzVeZb6EwgsYwhsq8CbcJ84dYEl1cr99cIxG\r\n+w99lPtxrWU8ABmk+/ZDz2Bi01CfJhYdqfhq0e8Q2W/cgwY3dEgZ8mW7DR9S\r\nSX3I/5d62l7LAAQ6IUCH6xPe61rlnfmyH5YyJljHrsI22n1QdScSTB+v9fH2\r\n2BXKalXLOB+S7JQKQDzzUVtDN6A/V1CWrdyW/x4bq/W0tJgBSbZ1PQG6KJ89\r\nbDIm5U59YjI6CqHZTYEh7gDTzAM+5MZZ9bKpG6zCoKXF6cJKFQjY95ze0hD8\r\nxZofHayor1/0WewAQ7Sco6mfDBY4SuQ6JRflnSXLyxa7rvy0Aimgfvj2+FNU\r\nueBvoIuo3DuP4ahsmIKWFq4nNb0pDILWcFZky6+S7hlyLdAG42xXo3JBbNrQ\r\nuWrdkfwnJ4zSM0dSSITZsw+TpELtWyp4QEowHrm0QvDgxH0N7k2P49onmx3L\r\n5VBmNRDuQnlNkWPpjrBK0zjRjMYqBNb+Fu4=\r\n=MJkk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-alpha.2_1674158646602_0.5084466718209026"},"_hasShrinkwrap":false},"1.0.0-alpha.3":{"name":"@slashauth/slashauth-react","version":"1.0.0-alpha.3","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","email-validator":"^2.0.4","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"3cd8303c11e3384cb33e234ae37e6f1e03a93c12","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-alpha.3","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-NCncVo8t/7k+hxNxvQFeyoEaPeHMAL8eU9UVow3QPPrjDVTgheALa9oNTA0mCgRa7nxn4gSyXUM5MBg1+16ujg==","shasum":"0c5808007874dafe5b9f90389c89570644d9abe5","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-alpha.3.tgz","fileCount":322,"unpackedSize":2290152,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfjFCnx07AT44HBbJgPjzVRNEW2gelhY62eklKOP1p+AiEA7jPL741f3C9qEvrCxM0WrbvrEd6fX1CLpr2P+vMGe68="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjycjdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAcQ/7BXmnccxKpmSuuvNOl5irE9tPkvOatitQxMXAeYhdYb8xLTpF\r\ncCIlFsu4EEChZatca//JbwMYNFc44qByFyne8d691anZDqDzORxE5PKLwsJc\r\nMYgH+31IFG8UWDbDOqLFocNKh6NNa488RCYsozWL8m3rAK+ZXCyLIegPHLve\r\nu1iWu68R5hN/n7sBfvh5W5ZXRnk5nk/fCBPePOMHSAiFZJboHeCZDYnwru/3\r\nnjxAZdDezUU15xtah7+JTBwAk+4lMbyO9skH00wLdNIsfFgZe2TrqJekOLLw\r\nkuKKHRI+JHUyNRyK7dEr0SZx0QszMxt69Jq/DM4jcErDyX7wS+Y+iw4k3zBn\r\nGzLTN+XIYv4+eHTRmwYs4SYOIqre5C9kBphWCSnepUtUQnqcaW9K7luVvsyN\r\nSplCjE6LfmVwK8OM+Pj5qSJq3XKUIdyVKJhyMOImTMgObgaiMKg0+t3fp4xj\r\nRgd2ugMJVIpi1t2ge+c9c5Y//ddP/LbJpZlU3dDtHC0/ZdRRcp7h0Wh4V/V2\r\n7fIuKqWDMmpLSO5tn8Ik+G2KMwXegQK6rbwBUByUh8Zdd8MWjbhNEiWj70Fp\r\nCH2bK9588GzAlIEjoEJbFYkV54EWPaVA5bcx13Q6Jw4Wr+JW+6Cy0Mwy5EFr\r\ndSnofYIvjiKQkdNSeGZ671o3HmYus+0x/OM=\r\n=3VCw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-alpha.3_1674168540742_0.6661250277165816"},"_hasShrinkwrap":false},"1.0.0-alpha.4":{"name":"@slashauth/slashauth-react","version":"1.0.0-alpha.4","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"715671156fc0a48151437a1b74b06dd97e47208a","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0-alpha.4","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ysHzpcMZ7gzgH6qJqjlzBzpdQ/vPFEHpAHjrpqRTUoAIEPJFIKv7/o52LDwk92Vv4MtcM2yLQuLK8UFg2mfjpw==","shasum":"6d81f32c85f02e8741c3ee827ebd4785818668d0","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0-alpha.4.tgz","fileCount":322,"unpackedSize":2289741,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpmoJB7sXI1C7zDMqp11C32oJUPwChg0zmUfanrbG3lAIgGT/idk+CJl+yINXRwm2G+t7nmX0lv7kqcKrUBaf2o14="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjydD0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFrw//U/GDGt4xSPcUmsX0FdvyFOxWqtlZbOnhqzbm8xYZBjXH8Qgg\r\nENLIGl2D15qKVPWW35JeE8Tn0vV+qUMPvz/fz0P96xIFAWNMgF3AscW+//pe\r\nwJXagigSJcJR8h8a7Ti5Eid8w6M6p825Po8iZww8YCljtXBfDEw11RQmRRBY\r\nHFiSGazuMzg7skenn2ti14jqUaGfE5wCd8+ABzHFacrmCdx1wjaT0FLlETO9\r\nPThyRsZNxm7YsD4GpJ1OrY5IBK8mUw3e0K+TTXiD6/hLzzRX1E2QeO2rkfTt\r\ni8WKKFxs+pfPZecl0pNypgX/61Z25vWFa67i74dUpvQxemvr59vl7NZT5O35\r\nbqXXfkJ1NuLTifOZeUlDhKyKqOFPfbND9pY9z3ir4YiOKYYsRt10nre3I0EF\r\nOvW68+9Va4oP+qMlFQtY8MegF9qFfzGlHuE3S0dBFqhmDxVcaxH8fg1Ub8dC\r\nmtHbXKNPUSVlAV1YPW9PLLcSSyaJ6vszSRcon3Fy0t7OojtaiZ8P10xHFIob\r\nQzJcyBUF0+GoOyfhkfwHbqFXvFrdvhPjOU7UaGEdYrNcix8njpqU/1Al6Wkp\r\nfA5qvKcoKGvGakSzMxL0BFJRzAird2P4eguIZ1unrkYPGpX/6PFI/QD6/Jd2\r\ntmSnYlboMgeYOVL89rqYQs43KFc9J7rxTWg=\r\n=mjTi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0-alpha.4_1674170612362_0.20112193862855277"},"_hasShrinkwrap":false},"1.0.0":{"name":"@slashauth/slashauth-react","version":"1.0.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"621590d0cf5a1b70f7f7018205cf47bff2b6e83a","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-JBxy3/thtIEJ1GdEd3j5A8CrJl6LL6t+bY8cmd3/JOMPnFWenDfAxv5XEJZI3A6DlxTYFeHVoiWbuU5OEpGwaA==","shasum":"85d6beda337d019577df33c1a5ab59db794dfeb9","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.0.tgz","fileCount":322,"unpackedSize":2289717,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGVFVg/UsTMypLyac7nzCiN0nxzynOTUlZhnhNHrHurAAiB5XntFyptYfPWthy9f7OHKEflmc8Ju5BRZrka+Ssyl2Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyrYLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPhQ/+Lue2il7rJj/h3zACnqhDA42t9UUxLogXnx58dm8m4+S1UoGd\r\nuKB8aPAmR+8LsZSCk3zKn9TRp71PKZWLgUH2XDpnIW/DduwLBjn04SWOtj4+\r\nXj5gWN42FmVHymZvOUeRkifoG9QrQ1vToN56y7zXaexAV7JwRlyUcI8t//Bp\r\nXXg8yw+M1E+NX9LyNLBwDO5lMLyQjVsSoVFC4C7lPG0O3U2iIv8HqOcwqWMM\r\n/usgQT4U0mvLa8dJZG0arAkBLqj7IdCmFtqLJzM97wbuq2UUCf19vsLai1JC\r\nb1Chem3JpbMGDjq+b86lY47Avobd/VzLi2PrPoipoe6NMQbP2bg0kTCLgBwx\r\n0ll+A4XjOYyz9BqHBjgkweg4EiXm9hVFBl+CY7SAup7qgw4WY1g/k/nR73Iz\r\n3hKlTfD5WO8cnCkmW77OJ8WV3qXAnf1frG6Csocy/hQ3/kODinY0UNJhB56+\r\nKLvX8UKofaWa3JTbFaNhUQX/zmnwHxbp/H3PFAefk8RE43ht4BvDDjm+ptLJ\r\n1nSZTwvozCyrxJGnzwudcZ1kfQdHMtwyYerm0LiBnE3pCxeXhGa553M1riij\r\ngKn25bd0wQMUITjmI3+S+nHYie7yPvAwYiLXWtdfFX/bKSTCqmreW4yqC0eQ\r\nXqCIbnG7d4OIS49pSgb5jG1J5XYPjBIuZoE=\r\n=xba0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.0_1674229259432_0.751464119734816"},"_hasShrinkwrap":false},"1.0.1":{"name":"@slashauth/slashauth-react","version":"1.0.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"0ece632672a197914baa1a35ec34d622675a8ffe","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.0.1","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ItyWnCiOM2t0Yn3xeTgRK4trAiY7u/RspN3qUSkC+N+jYj9fpTL3nsH+dGkjQwnmxen1AzI/Zz+uA7qkEdQ6Qg==","shasum":"ae2313356993449a00f7abb3f5c8af60e359fa01","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.0.1.tgz","fileCount":322,"unpackedSize":2290203,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuGhKlcuaUHvS2exzbI2lfsBLUOseVY48o0ibzYaAZwgIhANZz3C2ALEkuZUqk8h4EmRnUD3olDeGITMIXG+Xm7PHg"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyuEOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp03g//ei2XF/bhyMO3x6gOyGasT6kS93NvA7s1D88lrFi98lkmaVXJ\r\nM+cYGnXH+5ZnnCoZijpkiOU2owEll/ZafCbWR/HQ6Lf4XYmiBqF5xp5PI4rU\r\nTY4umjQHZxQC3Se8ra6SJtuLbZEg42B+mF9zYJ6WyZ1bsnI9+NuNQ9D/Ua6C\r\n1bPa2P/ofZe2T67hOtxd3EE+jeZaR7XZm3Q3xtX98MUbsO6HYZAtOmgBpI2A\r\nwbgRtQGNi4saq6EiPIWoPzH9VddNUVFRPWl9rYiAbljuITgKrY/zqcFYCf1q\r\n8xiPHgQGAw0c1Tr9sgNP45cFJGjeelbdgX4dsBvDQOHFNNOvB2YM4tl31JGb\r\nSYY32ABjTNB4sZ2dCUrSoMgXq3UATysCvFIYI/TeqGGuH3dxi0sgoPbz9VrB\r\naYBqOrPFQXd4nZqwNLKOmwdfzhwu7g90wxLBuskqh+UxlBc+BJmpy34KhjHj\r\nQy6S+RjZGcwiG6TJBtR2HFnyTDaXt6vhhf7bucynsllRmF+y7k59izQJ8NbR\r\nHLVh+nWPYGcbdKbrYxQ7aoPc9xedGq16+hTM5YqziqEsMaipnNxukhzuQ2j0\r\nie3wZ1NhvTGxAdOaFy5yAFw5hbXSSwyHgAr3fo15S2BUWyIGUfA+VpDPY6YK\r\nhhRktmk8S77Fj+umcA9szH1z+PzFs7btcD8=\r\n=Impj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.0.1_1674240270039_0.7099168583460254"},"_hasShrinkwrap":false},"1.1.0":{"name":"@slashauth/slashauth-react","version":"1.1.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"64e1f2db11c8be3ad475df30d6312aa0dbc6be20","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.1.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-iD4mfO59bWDt7nayKUP/a7Uhda+VeKp4QWWdGuG2DEmk5pUEfG2GBXJS6c9dwhpwBL9ZSyB3kwFyoie5zleKNw==","shasum":"91bd6a198a2fdaed13d1c4a1ed70492a8f7ce152","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.1.0.tgz","fileCount":322,"unpackedSize":2290928,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCubToSgR87FwSJCLpXjuzEIU9uZHcPyt2/JjDmH/e9JgIhAK07zOE1OUNoqN/kucEhsLEv1bLceRHC2NEVK4C50aN8"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyunfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFtw//blvJtcly+0mDlUOytSfnW+VcniTdDdpSA3eL5Zs2vfa8os9U\r\n3skiHW0PDmxfz9sv9ml7hqMmAtyX2yuXMBSPdN40H//5IjLtZx5yXuuNv95N\r\nLivTIhxgYud5G/rq/Y/apanMdCLLt26HhREaH8v02yNpUJ1vk/X5peBqWZMu\r\nc+XW5Vej/+p1oBhNXmsJRrybA+iVZkIdZ8WCYmJl+1SonA7hM2gN5tdBKm9c\r\nLd1svndLed8gRoZ1ghDn6spawVljkRq55GQGTiMxTeJ63uxovbNJx4++Fedr\r\nKDqi3DoYQnjn+rEZTyFzRe6NA53yDckT57aVOxT2phXngqB9qoOZGd9GeZIB\r\nNQG0hGkPPErY3wazuB5XqN5cum3eCH7zYeT/S9LPN9bLhkr9CNRXRXE+OYuK\r\nc5E4p4stbKTmDDVUua8VjuT8W17rUrAhkH5/CSFsCfGTqr2BTi2BOR4UVswY\r\n6cRoIo5NQt7fKPPrGwa3j6YTcl/iPJQczESg6KhL2e6igAxFUbQabkvgjxp1\r\nLeygUehsKrJ6xUIA4EgVfQYAy71IEGRj6LA24W+Zu+IAKrm+wQS4MZvfeESM\r\n1q6MXiQVpetTnL9MHCddSNS8cHN5LTQRsDby91Gb3hOpNwU9apCZfdX4s4Y1\r\nh7NI1FQ/7Jnqf84l7pJSXrliRE5qD3K+8II=\r\n=/20W\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.1.0_1674242527565_0.48666873634762187"},"_hasShrinkwrap":false},"1.1.1-gamma.1":{"name":"@slashauth/slashauth-react","version":"1.1.1-gamma.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"b8e57f378b656a2f1e5afc960acc07cdf520c5c8","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.1.1-gamma.1","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-wqzrA7iSK0eUrcLxfitp+Kt7P5VV3hBgblL891Z9c/Pbo/4zpV5pe0vz5O5K/2gUUcx+1Zt4yXvQTeKhPO/8kw==","shasum":"0444d86f35843abc7a86e0389a24a0a99bd7d100","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.1.1-gamma.1.tgz","fileCount":147,"unpackedSize":2192446,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGIAIhUo1j60nHFYUjzHz92pstaMvNFTPgQS5Y73+PdhAiEA8LVcLXVJKiIYdmNNNbvydkBEU8I0YwuSy12QsnBBDso="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2wI2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovohAAmZ25/f6+gvt9tP42EoYYBrbCYe6XI8/3eCiZoUQPUFj55N0c\r\nsVAXdqql1L6FqQO9s0mhHWb2RQiuDP8F+YUP7qYN7uQPIsmJYX/RpBtqNerB\r\n/ETir/WzSL9NMWH5vTlR3/qei+SSz+Q5W0gThXC9WcjcNnCpzfl0MW4SxIQJ\r\nRfTxqbm9Ljzlxvg2oJvrpey59JxoKYW85q2ZuQC2q9jBhlzbiPNVlkChjo/n\r\nll2B39Gz94pZI0rSTpN+92kmMj67YqE9iHLSRc2xNwVEMjwW3zmoh85znNJh\r\nKPjfuPf98Fx7k/Ns/c37ltZjAl/1XSxjcuOM9NeJzP6z7INg4w6+6ZA2w7DU\r\nLcQvCfiglHkENxLPRUN2L2kMFddBXr/jZPeGTzXfDLe0XZKSALWRtKGz+3Uc\r\naOc0c/IuCzoDuTn4SAFO6fs+gWb8SCESg2wb5puhQMcrVDfRfjh7GVjjwZmy\r\nJG9chV+DfmzDjhYrA/HASOYp6JB5Ap5aMXjR3UTBBa+Xt+rHopkREjR4q+Pd\r\n9hjRb+vdlrOAbvSMy55Cr4iK0fJU++QKQVFQb7eryiaKI6kPSJRLzIV0qmWV\r\n3PeDSmsC8Uz4s5tdpF6EJfTiflS7efvK9Ad8omirX95/xKCmd6sVkU8i1drB\r\nl8Ojwae5eluViBHova0yWaFORYQIqCffD5w=\r\n=qgX/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.1.1-gamma.1_1675297333921_0.7115646249516066"},"_hasShrinkwrap":false},"1.1.1-gamma.2":{"name":"@slashauth/slashauth-react","version":"1.1.1-gamma.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"793d602be5720fb7987046275c10a38bac3cfa1d","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.1.1-gamma.2","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-nI2eaBJivIUculUvHrkbpohUb6qk/wtKdL/z9zGPqghx69B5v9o4JW+YrMDZrGNOjc+S152eSufVhIQ8XRnymA==","shasum":"15b202ed71b99c89a95671dab8b5ee1da893b11e","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.1.1-gamma.2.tgz","fileCount":147,"unpackedSize":627794,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/WGU3geUFo4fYQFoXX9w3vdq1zgEJD5cE0+47twS63QIhAPvV2cTFmcLAZhTcgWyDZEC8YS2vj/R3J5gPgHnqv0IG"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2xStACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqriw//cSEtK66xfvsLL9Gcc3DpcmbEYI0atWgqN/kdgloJJ25nModU\r\n9uipWt+4QPkpVh7nbEhIEpQcMkWYH87btV7MbnYbWd5gxyWUdLA/IjC0NpKp\r\nB6EQv/cUP+3OFgBnxu5IOZrTyJZWOixkEnH4yTkNmaNh4d2gYqDDkhAzwTBO\r\nuZQcGkuSLLPzVv9SEauFQuXecjKjhu9gPvg/LW8/HM4fxt6+FLCmgvjLQyFN\r\nHcbGKFMaUJ0p/OfyE55guhLt86fI95NoE5hnmDmgSEEtu3SpIjqtbApa+zdP\r\nufOMRXud8DgiKn0IJM5NVJzRyaOWTdB+fcZVF7zE8CXYsPozkDmohWrYE+WZ\r\nuz5aVA9U3EFl4QR9xoBcarpmZ0SrUwE8iV1frx5cQ/M/16psy9u9LIIk3nI/\r\nzKFmY823nCdA15VC369xUaPno7/bf8rYHYmJNdljbr+w7XVcbngyQxwjtH8K\r\nP/bSom5w2kVbxN0NlNxAJ2WEqeqQku9OOGB3N3dE/KFdaVrluxD3oOlf6Ibi\r\n6lihTXUtpCxTHua6iuor+COUgVeR5lXFY5JifZDbx1DD0Y5+Bx/c3fwCnEF2\r\n1xO8/4yLyvyB9n00zm/jIIwOilOPttbrk+Xk4jaj/wBtzNg8HqAHm4zHctyT\r\nWsj7vR8Brch0oyTqSeOeNVJaqwavg4VAOr0=\r\n=qjI1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.1.1-gamma.2_1675302061660_0.945930869576266"},"_hasShrinkwrap":false},"1.2.0":{"name":"@slashauth/slashauth-react","version":"1.2.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.1","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"4.5.5","vitest":"^0.20.3","wagmi":"^0.6.7","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.5.1","react":">=17","react-dom":">=17","wagmi":">=0.6.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"c0747e4373569c3f93264dab8b4cca2dde77cedd","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.2.0","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-HMYKCU7mwiHggIIkPvIbNbz1qGhT/IEN+Yf1gc7W6ZCwss7tlcEHVPs7wKdcAZPQ4AjHmNi+auGI3lqWUthyXQ==","shasum":"ea2a0768a8167db15be9748b7428e04ff1206bfb","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.2.0.tgz","fileCount":147,"unpackedSize":627920,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrBWg0Zl165yMsY+JC2ee4YvToh/2olXY7jntVu9nWCQIgKkDTcvISWKRbQ2E2Um5N8kdR5QHDWiNUvZVvI5AVuNQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj20H6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMwA//WYjnuiZNl4C/YZ28oeBDb7dE7rGUzpmbfymRyHnKRrxTBKfx\r\nkRP2d1vMV4Pshs3LXwUN+eMe0uhvgS3RvX09AqVUZNvXI4R5SKYzgoPnKYo/\r\nsXxqZA+F7KdWG4RAVqL97loJiGeJcDwIxw8aIsPWrEsaYT9nXhvW2fIvA2nV\r\nKVvgdw7sPJBsUmI1a5v15BefcK9W+MILEucR50GeVASgkOKm7uz6O4kj+Ojn\r\nHqypq7OIJwl6g7PF2R3RNpeWKLlKzhATfU8R4mReyc8EGF2Pk6AzewUJsoYb\r\nlXnOxI5Q0Xuv3yN5jQnC0AG5CX08BxIMoj7OSDgeP9YCfIEpzmYw9QWqcL3L\r\npLHSNC/Rg2exsHzz+nkO5/lJG6VfJeHae4dXaihu/P4ClphJQMot3ccW3sVE\r\nwsc7YIQN4X2RiiXLRSPhXwHM3B/qIt6gDkXq+bfVTEI96o0pkyFR89oKn2K3\r\nBSsWAn+VpUA8fKP++K/bSSNbHkrKHAMigzsAKef6v8z1NLgb/WgFHFKHPoGz\r\nI6cqKb4h9kqRvSCrmVc+p1pKcbbeDXR482IfERs1LFo4pucEnX10VkQuPkWb\r\ncpZmkQrffysCGzwSQf9pZFTdKBv9wqN9/eIJwVAUVle26FZC+Y9PDnna4QE4\r\nKX4jxmsr/ssI+gzYwhKC0K5PAxUJE6pCKys=\r\n=Vh7H\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.2.0_1675313658650_0.24725540482789765"},"_hasShrinkwrap":false},"1.2.0-gamma.1":{"name":"@slashauth/slashauth-react","version":"1.2.0-gamma.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"ba88cde9bb144a69f6703973206e692842983208","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.2.0-gamma.1","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-MrkhPq8gPjUWl9aWqIOp3jVczqDERFD8dxRYsQ6WddCPPdX63v9auzxeMtB43BgeLjJNxy1JCTm+x4cjQ5flUQ==","shasum":"08152a5dc21398473799002d13874d854416ae34","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.2.0-gamma.1.tgz","fileCount":147,"unpackedSize":627887,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsVapa62whe+vjE8tIlH8xAjoTeh4XKo0gMjfG7xEHywIhANNo8vDIfbzxJpTq2am0g2fKolwKr6dZk3yK/t1LGhLO"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3aO6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnDg/+O3XhpZgnXjozNSawyy5YjbMgDN028ibFUQC5ghTdVTQzR5fT\r\nsuqpQASs06Lhw6ecWtpiJcQe8LIZPKvyvGbwN0s6037029ntJwu5Mg1ZeTAV\r\nogqSDbPRlMbE6hdMpm8Ar+3ZRWYzj48Jymdo7woldohJZZQBIC2nk7Q1APLF\r\nps88Rhhot8PhExO5V9xrd+uJQr2kgJ2laGsxUWkXGaJSN2Mnm5e24e2KGiu4\r\nnjZOtG4Qs5+MJrTzag/6dyHtqHFl926eHL/LZ2rp9ul0j9M3P9tpWbU0pcRj\r\nakjF/RJFOef+UHfNPRUgYUFBhLgInSgcgIuVKy5+Be4xmLOnPSfp/SL092hm\r\nemjYxg+b4caXiXwH7q4X3MBc4cWE+sQO2xo9rdVVHtKNUOzTHSDBS4yZxxnb\r\nJgdHo9k+XK2Zwy/3yv84EG9C/8cmRG1/BxsrpBaXJWQH+23Sj22b6wlCXBxy\r\n+TAgfosGlo9CzAMKURVpZzAYvd2Dfn1pbQqURFTSsyGFIX5QQw0GowAIXga9\r\nhUoJcRt3/zHtH2EGz5OASSRdY3Gxi5g9aoHZ92AQX6b1EAdLY24xpsQXVOK7\r\n7WO5XjBe1p7TBxyr0vhmgEwSM0ugmau4n7EVfTh3Qa924Qr4qV1iYyBynRuJ\r\nuxAXybGcvPppxXm+CFJc+55HOnVGfp/UBtA=\r\n=A2xg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.2.0-gamma.1_1675469753860_0.3758356354861172"},"_hasShrinkwrap":false},"1.3.0":{"name":"@slashauth/slashauth-react","version":"1.3.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"4a3eaa45803fd5356151c30e5e52d3b424b381ba","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.3.0","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-BROR25/0ZdRPrrsg3BmEPH6OisCr/38kkYB8HZB6cSRharYnTKWp3KziHhnFg/VhTWrdZQVEe0RnSQv/HwtXZQ==","shasum":"27baa9bc46f8992a7f4aede5595f0de0b884197c","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.3.0.tgz","fileCount":147,"unpackedSize":627879,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMsbnLNBhjos0xKPoZmWtlpPrvtE7VaAIFauwgV4VbqQIhAL/yWL4U9114UBOi7uL/CRN6B+gipoHNRn+nTeYQQyqq"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3aYxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZQhAAgOXIzYhdFHLRXK80/I6IuJcDlsuQ6uRCpCCAxj9r3Vqsj9XB\r\n1XPSRTgnmIRdl3yNOrE8zbP2YMs9xlS+cwybdgrxsTkrwBGpRBZI8XHKjL3K\r\nOzu2/zyPRoCPj2NEhL84Cj7L7ODj51Dd3r2GkuV+Z/nDQbvRVfR3QqMmx23Q\r\nvrYc/QCBWSAZTxQZdpAxVaK5Zjc8bbcxURndzwJDyGl3kXtJUzm++Wk0ksCR\r\nadQnFiN5TtMZaaLwGDnYRmI3kg0VZSm7rqSkImMHU2uTltd/XsNRRU4076qL\r\nlHbw4TQe0lm8Npt4lRQu3zKBivOgK/52Y4wZYOBhmJZTLi0OQCDKGVCDxsHL\r\nezMc5UvHJnYNVotD7ZnAT8fsQea3Cm2ouqHj1yrGh4wHNRyy3SaOkvXHVF0e\r\no/3kpHer3XZOpURiNE09iRSvrAjRbt9/6HuEGN4lLHdcTJc3pSZDXPu3B/KM\r\npW1Ld6F6zreN/YEFx6o6mz3a8VuRWig6ps2CUT+w/Xg0XyoVKKJf/sTHVH1z\r\nhu/1PIKXNE52D+R5EDnMzGpw74lxOTJwJY23DfXVk3T1xKNSGbU3AA3n7H3Q\r\nKzuAOuolxj8lMWHoSnKEwfrpNvAbDQma8VjRhLdaUWr9GYBLbQyRaT9AEUsy\r\nI8hlekGkdRIrcinpoQHklOthhcZZFwSfWro=\r\n=T/AE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.3.0_1675470384772_0.7124129043964507"},"_hasShrinkwrap":false},"1.4.0-beta.0":{"name":"@slashauth/slashauth-react","version":"1.4.0-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"184c6f664e9a707dcc3c05d59e631cf108c06cad","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.4.0-beta.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-FnAGSItmnBQOCcmziN/b4v045KWRJMhOMJ0Q3O9+pV9cMgfx5Xit/DzJyh/bJv1SIje9ZlF/8Ww24vve1NF7sg==","shasum":"248ca71c18a4ac9cff1da2f205e2a706e9e90139","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.4.0-beta.0.tgz","fileCount":297,"unpackedSize":757426,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEFzeMcP5+J7wo1Yylc2aHo3oDNW8PV7i/ftTm7Yz3LLAiA6GM/vFFX0pi23GU6ymnahGcrV0aDzes9WW7JnlxR0XQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3+T+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmLQ//bWLKr4Lr0J2C6/tN4roPNYP054HP5GNsSwcvuByJWZjg9Cti\r\nMJ1f9brvMfgotvY6N0WRgz3vT7fwDHoj1hSVagPaHmuZlFx6h8VT5iUzFnTy\r\nUc3WnDfX3tIEAazgOGCr47WSwpUB8kRiutKBxo4igNk2oY3sLwJyHqxEYxjI\r\nSMhLXbCOeiw1Vqr1M1cM82zTGp6pRNY/vg8AE2SXus/AjIOZBlG7gAfaN6tF\r\nVtuX5OV+EEKgMP9aWje3vd2DlCGJEUWhuFLL/Ft30jxjoin80DVVmb6p4ai0\r\nw618y5XAgeLLqP7Jre2w442E80ZTbIZDIYdqup0Z/6eazSlM2t8v50fT43K3\r\nqe6sxq4HDK3YefTIunMT9FQUOY+IBUVOdv1I+wkvfXoDWw/IODuqLqrn4ZhH\r\nRJOB+p/uRTAW4B36UXXABh/0Dc15cEzVzgwEgvD+2B2dnPLqCSXjoz9q9ULB\r\n/4bTOpA8im0p2lfYVaA95hoclKBjpToRmndnliBf7l1jHcDdKTJ5rcftWx3E\r\ntHgtMGDrGK3MlQ/bJ9B90JS5eip9AMFea9YnLUH1dJ9yom6bgFRYemTO8pks\r\n4nuCLehz2/FV84u1wFMmBSkp6ukFDj1ptIbeWVd4oJfZDWv+lYUjh8fM2oYU\r\nmfKadQGN9zs/UwvjS0dTCNrVnDljlfFMgNQ=\r\n=I+t8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.4.0-beta.0_1675617534357_0.6674943896177095"},"_hasShrinkwrap":false},"1.4.0-beta.1":{"name":"@slashauth/slashauth-react","version":"1.4.0-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"184c6f664e9a707dcc3c05d59e631cf108c06cad","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.4.0-beta.1","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-82SndXN/s9xJWkJj48Nbjz6IbVkMAPMEohzmhxLvuFEjKM+kgmQeEe8dqHHBtQfUzzJHZVVrRg4XzE5LGpnVkQ==","shasum":"cd97ebe393c20163e22a4bd824459214b25b8e94","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.4.0-beta.1.tgz","fileCount":154,"unpackedSize":671934,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcw5Xr0mDVAmyqX6XpVWLAJJjG7zFRHIFnvLLhXuqd0QIhALhdWCsTqpS0wRpXrQgdI4dDniDaI9fBjeBhZ2QMSat7"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4RUqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoi2A//QxdmSPRBSduo7Ez5iVI3M9j/9IwMBFmdK54ewobyvFd+Qr9b\r\ntFWqfn3A2WLva2y3fvXfWB8KJ0lBSQ/hRLvt8Jhqs4AeZoeV+E5sVqnKT2Sq\r\nXTRP068IWa7DmimbzjxoUleu+rAlkrVbxqyVJNBp2bzPP4UnHm57YbjSO/+E\r\n/nZ88whVNxhrifPvZ6RFCLWYDY9SMcyf/dGzSBODHrDIGDYNV0apdmbpJUMp\r\njdWpe4px/nIAnE4/Oyhv/Pars29kPAk63NVb55lpBeS4yffVj796n3YmpYZU\r\np5yNcCs3+3b47LoKMh+IfAtfuDBubZSvkxlwKT9Zz5GQyvwVAq4OLhgRnclc\r\n/9GANTYSLlGG5Tpn9ymb5Z5GKbyPqmLv6qrmVuzrB0P5g6IdVpkMbFe3jpAp\r\n3Z5Xc2J70UOuaWFjnnbObLvUPayLfXSY0EZX8y6Bu+t1llJchNFKqArhfnw2\r\nqIXaW1rlO2s+fhcI6qsWFPkv11y8vhCKEMCH/HvW0YHfpHQUMwqoLEXw6dPf\r\nv3EsiGV2ERd8UsnfZnAh7wSnK2xD/KT5Sn94hJrmQ3cctnnqPIX1dyTFOwM5\r\nM1iCDDsFE9F+Y60kAf48se9hVz6yZBRvkb3PVT/Z18Y+ibubOrtnh5jGLeLd\r\nQO9URkASMrow/trwzBAfAjXUcME31skb5Uc=\r\n=SWFK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.4.0-beta.1_1675695402477_0.14466729726159744"},"_hasShrinkwrap":false},"1.4.0":{"name":"@slashauth/slashauth-react","version":"1.4.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"86a36f35505fe66c5c2095f7907e825e76e1ad9a","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.4.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-U1Hg130hP/EXq8YlGcc3QPZSSIgp9y6w5k75F3/0TUsAAGfqC3f9CDfUlvdRL68k32whGcIz/uHhykgwPYkVTA==","shasum":"29a5203f5a111efd8a44163ed5ac74b268dac50b","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.4.0.tgz","fileCount":154,"unpackedSize":671927,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmkRflYXiQW5mKobyzFO9BbsLzQgAwWcslzq4AjINMCgIgdhilIRrX03NHIMItE6XgmvF1nokbFB58DocR/N5vWFU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4RocACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr59g//RZCegBCqNB8ooEUgL77wSC1YWYeB/m8CRR8sn9gWu1H34Wor\r\nifXA/Bokxt6VuA+lwq5EMEJdRfgvn76gPn5O1ZGImBZHDyS4EFfR0Q1ko9Pd\r\n2l1QB5OlkF4A+kJRjXBY/dm0AZHimN1+aCOfXKJ8r7KSo6DT4JeRjY3n7R/1\r\nUDHYL+geJPiaugm2SP/OJT0vWlGCWzHu6g/INnUWlEJSPOmBe/lzIdHIr1C2\r\nvOeGFUEPtfLORdDof3D2xBm6+5TgD5t95x4DKvPZK0OUVOog3xEYDzLQPyin\r\n+QZSSRoOD16YQFImO4jEs8k3kW2zu6ozx/COhUpYwqnIBvf/TyeRgciSO8D2\r\noOmeWn7Z/Y4uVc4b1QSBHj3ADqZT1IfwQnTuHRLQxFdaDrzubU6UMaLyBJ00\r\nCJ3Ad/avirJehn7GUZ/2Ga8fR0I4+KPRIcyAt+KoKFTR7JcqDXu3IAOTIVYV\r\nh4/pd0Gtbsrb5y0cuKn9exeZijwSv6BSwy0g0nR+JWrrsFHKXS71agUXiGoH\r\nRBkoSruGb7JVVeOpVBL0fXIx79J5JEEQPpUC+VbYhDUk2/DJ6aka7GULsBux\r\nzbFExvBQfyUWJ10sxtWE3WCY6bIknrKgyTaiOu/pOQWQuZ4aMscl+Gq1D3oY\r\nUYYqOd6b+zA1tKbiskUxH1K1zL9saw5q9R8=\r\n=BvCV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.4.0_1675696668347_0.7183160838951492"},"_hasShrinkwrap":false},"1.5.0-beta.0":{"name":"@slashauth/slashauth-react","version":"1.5.0-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"418024f8affc56da63005a67aa063b689f33779d","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.5.0-beta.0","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-u6/2T4gi6kr4hp+1vEdEadE9PSD3YxMxq1iFZ0fSsE3/9y+mQaLtKHDzgmzJei+2Eqr94V2RAfezUBJtOPdhmA==","shasum":"298dd410fe46b348e82fcdefb0716b83d41712c2","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.5.0-beta.0.tgz","fileCount":174,"unpackedSize":680604,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZGGKHcKPk64l1AEFxPO5/6oQ6BPgsMOicvKhlL2fKjAiEAmYqq5jpGAApGWytJoEzN6/JiFJCwuaAnAZ/9E21LsO4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4s89ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOlRAAgKztb+SX74WTcc4xR67k0b3+20WRkVlDJeNTLE/hCej2Jz8L\r\nHQO2yvssfV3CDJkHIVllrRF/7A+MW0lo2BjuEs6kL5po4Rv2YPnOxsfR3HM+\r\n7G8v0etWj6O6SiF74FIaW5WoMjpDJbi3mn6SeRsqRo95UuTRnF/VVdtmWGjP\r\nxmwjCTxJ+z+8K6jZRuZTPZNwTp8sgxODQRkbWAJ88hKaOQVXndNBFZuYy+uw\r\nMeisjP1Pa/0uwNQS6njfpyrSHhPY2vOJC5o4RtOsmLZXP+Jc88GPtpOQVu2F\r\nK98CWYiJFJuvwSlreLAYmbfY0eG4qCqAyIQ+PBROLrV0PIthMl5Bbd0LKlpi\r\nI+h8vC10AD942LKm7eWYbhNEqrWwRu/mG/RQKYi4JuPxZYZqmcScscG7P6z4\r\njAv9sOh/uGagBulsZ7foIRsCm05PTqFMskX8d/DsgeqpX60zwVbMh3+MMxDe\r\ndkjou/V1oPr9gQTvreJHcCmo2CEZskEOZrtb98Up08h+w5lGkdJB1PFh74ru\r\nTo/tzSJfG3Cm5yxMPYizaFirRhcKJgJGa8D0o3tqu3FFsQ8LXb9DQURhRwpz\r\n0yngmCCXKTfrId/e1trthF3HwTGjlbqUSaqeeyv+0i68YPmXLjBK8wTRLQUh\r\njKjE3zI1a1R+p2RNDBorynOXXeKeSzM1NFQ=\r\n=IXHk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.5.0-beta.0_1675808573347_0.9486507345930792"},"_hasShrinkwrap":false},"1.5.0":{"name":"@slashauth/slashauth-react","version":"1.5.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"9c7ccd949d5896a25c0c3862afa5e735337ea872","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.5.0","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-/41in0IxuqEpuXAKbGAz3IxPRZa8l9Tpbn6/bUkrTw78QS4c3kmmUq8ajbO4Bl+fieWu71TMqEimAAlkxGMkiw==","shasum":"47f684c7778de79091478d97b9b6e0b55978f4f9","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.5.0.tgz","fileCount":174,"unpackedSize":680597,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAu+v/Y75nea3lHgTDOwt5uOgUGiEr+ennTpNNwmLKX8AiACG3axxxIDIsYJsnZmXi8KDIkFIMep3E6VaLCXzYJwLA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tkEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+3g//cgi8TI8FgjuVirGV0Sq/albi7L/jAHayLBwLTHQTeS7+2uyL\r\nZnO8mbuE6FUweIDIa5tQrTaTQrPlHBJyiFFTlOEJHDQp08RA2N1/Pdj3MaCx\r\nRi/0kSTPc/LVWhVQG8Z6q3kdzpTUfLrtYvrFiuF/uJKu7mHEyyGOD93NMUxZ\r\nK27G7AVS1okfnmJAq3Y2+xBchkslR4An/WjbrJ0SsFmeuW2F7HGtgMaMtvxq\r\naspuMssSVWSavA0UeK++hjQlUc0yNej1lgIvM2M3t0hebiJ7hVZY9gyqQzIg\r\nEojwEVtlO8kejSpZzrOLQkHRPZGEnbkLa8uMCiOag8eOs36o2Efxfl4yTLtw\r\npnbzx2PZe+G5LA1Qgpq2DmgtUkPPEJyvi0W/29QXjtQSCw4Bdiu4ZXc9uDJL\r\ny3FDH/ATemFv6rhDqOq7Nqxziuq1edV11+SAz9NYymqMUG9jYSX32asSAdJO\r\nafXdPtixh49eZnSXvBIj/fDPTSOsLS4IfS1LqGXwZlf0oxW8Wj5EXoR5K6T8\r\niXN45u4+HH5mbTP1ETLV3MJs8boXbPwK4MugW0SC5SmLTnXJv65eFgjjbtpI\r\n9pga3LO6QXqY10ouFsmDJLlWMtvn5ilKAkFWVkArt30Jifz7R/vaJK7ADj/e\r\nkGYMOoZlz8XttloboQ6qlAXgPaE003ZMIiM=\r\n=Oz2Q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.5.0_1675811076160_0.8597106656783311"},"_hasShrinkwrap":false},"1.5.1-beta.0":{"name":"@slashauth/slashauth-react","version":"1.5.1-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"5fca35d433eade8fd7786950ca97c53a79c85d39","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.5.1-beta.0","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-PRe5wpRtlnYVK8N6xxunh+jn/PFefJP9NwnMMTz+scJLFTXjRLECkhTKTFBFeHFieJKazAN1z8HJGHwYaeUttA==","shasum":"283fd5d83650d2de2496c7b324b5d013ece325f2","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.5.1-beta.0.tgz","fileCount":174,"unpackedSize":680519,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBMQ9qFDN/V2w05qG2qoWjL7OAnAPO9rwnOXkzR/DWuwIhAINfRoxnONC6U0WZcpatQSzSEpZaXJIeoMs3r86eabx9"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4/CjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrnbw//Vmf81pjRxo7yn8aqNzRlbViKgenwJtHNlaxP3vNt3O2XNt2O\r\nYX1074VuFaEPOCPU83nXMt37i7ay0Hovu4cwaOGe30Cf8MHtyDmkoDeRvVht\r\nNUjThxr8Mi8x6mAtP9tZpDVQnnfAngJUrjcNOa84HNwxIM99wabT+WprGojd\r\nwggXQz6n7Zkh+iiEEXhapE9tPfK2J4hWUlz83nN8bDorEGQYQufXUZXTHhHW\r\nN2dzTGLISzTcgc9/GyhgiINGA9de5QpmxNqWy6SqxcNqyQMXy6A8bU8WE4VD\r\nFPU1NuDq6aVNx/dp4KySaaoutOW2q/jr7tgdkzFln6vjMbIS5Wuk0yFhbGVs\r\nuFFyW5WIYzWevGdQGmMLCUOMB8UJvSbLiS3eogbpdcoNa0P4aCWhVtUZ3wVP\r\njqzGSQJ6ga5a/cz9pNEOwhKoKHTfAdMRDgfkrg58KLWIU1YUkrV7xZTkDjsL\r\n2VuD+EaO401nXEgptJNH5XrxlcbWSwakTL7swCT4SN38iQd4wSD5IoggkZIe\r\n+lqiRBBZ8fSrj7LTfUJqCyGHD6SA3N8nwTT28V8f5e/hHhEFuidrEf22vJfS\r\nnMf++Xv5KsR/Sedum2pIriLcFZgjOFreOcNQJsjoXzMRFxO2LSkuU/xU8Fie\r\nSPXecHZHH1pVVANZ2v5TqMEef1m0UM9mKNg=\r\n=wJQx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.5.1-beta.0_1675882659317_0.8854519090672832"},"_hasShrinkwrap":false},"1.5.1":{"name":"@slashauth/slashauth-react","version":"1.5.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"5fca35d433eade8fd7786950ca97c53a79c85d39","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.5.1","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-adir4OyZaA8HcIBQ2GL2GAcQ6A8TeHt5gxbJOtRmqVUnaoKShCkwEugXDv5Pp6OYpqHQyeTrVNa4HEhOePB9PQ==","shasum":"af293c7d5bac5fe49b7df04a5c2d558560d1a6ff","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.5.1.tgz","fileCount":174,"unpackedSize":680512,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFsUpC9dnyYfn2cZG07XwX5roH6DG91vWFzuQ84xT6QAiEA7EL7GL1rSq9ThyIpXzxwPaY8HxFmqC7LI+88U7K4jQw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4/OsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeNg//Sy0rUIz361bAzb5RzuvzXrln1aWVQPKiX1hfNYxU9Bzb4ept\r\niJFi59sUOLyfHs19NMLCIdG/q7xd933juMNnTPW9cS3tJroh6NYHbiGJj78C\r\nJvgqif4pIzyODqzlhlHFkv78Rn6N+DfBzesKJ5LdXFL5meWmih+F9blXevJm\r\nat34ZLvvMzLChBmX4SRNOBSOyy2MbA+CHSVDLnmKk83aSAMM9jBUWGLYxjsF\r\nUbTMLSgq8s31oKusmP6XN6rs9ZfmgcZ0mC1gMw0L7XQrToet7NzQPPt0Wvpt\r\nZVkTdnBe56rY3n/R4rDZgsnXfHKtbb6EEEYeBbWHrBNHySu2nBS2j/0NwXpP\r\npV5bq7iQYuvnIQt5OZ+qr4j1rnXNkawO1VL5q6ReGO3wrKQRK2SExOAs/hzO\r\ntyMJZ3qXNsn3ZoKGMbS/HRH4Xh4fNz1ogIYzvdb2JSxcnRt2UzxaQRAd+i3s\r\nz4bZLnCbjPl6H1WhOZLfAp+8I17bE7KRV7T2grHlxbpT9TT53vxkZnTp+DJC\r\n70kyPMmjorPU0708nOg54jTQvQQL+DgFAxa4pv564Zv7FNEib1IRBTFsxMPJ\r\nK+Jv6X4OZZiI7PNV3uaROO8yCbfB3h3ksRZXi0zILfxw/uqVQlQTSWcTJfdr\r\nEHvuh0H1cIlEAKjuvQfdwXfreu91JvJsmAs=\r\n=GXcc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.5.1_1675883436087_0.11944840086030717"},"_hasShrinkwrap":false},"1.5.2-beta.0":{"name":"@slashauth/slashauth-react","version":"1.5.2-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"5935d90416a711ef9e77ccdd13ee10dd0fb420cc","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.5.2-beta.0","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-wOWK4Z1dLU/EhjHJtNHxTAC9uU5KecEKp8jXnYfvsF1c2EQyPwrckWkyHqj0U/G5V/a8Zd93hK7KChzjUsSrQA==","shasum":"0f2cd69fe8a6bfaabb04cd4bb739c7e9707e91e1","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.5.2-beta.0.tgz","fileCount":174,"unpackedSize":680416,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlZDI3VrS7/LH995TtZ5KXM9dJpeUp7zkkrkhep3ZHgAIgYXUxROgJ1/FtWQ6dCii0G+0Ddl4473sZMrVQe+S5Isk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4/gxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6aw//XO6Q6qMGQnnoejkOf3oEO1i4SnCwszpl2qh52BbE0dfVY6lW\r\nusnR0ab1xPWVzIoh3ItVyB3kemmWbfjNvQLk83Df4jwq7zchWPTXNPdyCFQu\r\nbWm54KXN3eoSD0XOAzn/uv02mPAZD+UvD6bacBx8qFIXi4DGCmRZxil5SNsF\r\nOElO0aKwDsI0svc9MKTcVqAoAzraMyUZmFCzRXR+fKOhXo7LaqGRA/A7YONa\r\nHAZp3cMI2z2EDd8fedoWTY5Wfsoski9c6Q9bZuPyk6xM8rOTUAt66ZIj9PEY\r\nj5Tc/3rvac3+HWmjjSdaYl5EsEgrG67g0N10oIqmFF7FyX0awOgrhkVNm1SQ\r\n35zOw4Zkg7B+N4t/0Cpk2czCSYyTIfAfM4SVIdlvSISDOydKXNaMRm3o3f0r\r\nf7jgzJMxgnxpC3pj48tZkN/jPYGgJWxePeJ+SQoYn9wffseWHIE7EbRGOFWp\r\nDR/B7rg2qL75FVgwlR6p/PIqRSxnI1zUA7mqxlDCdS6EV4gtqnK+kFM1562h\r\n0U3hCuDAGKEulzIevwtj7J3viX6Ei8V48YxLTsIPqEvw2wnO4Rh3vjkRaZph\r\nUK/lN3iVOD1Y2heWFMgYz1BC/XQqh2GQtXdE7Eknt15Y+m0umV8EjZaBcJkm\r\nT+ZLNMpfE0WR9DWsZ4o+ePEN06Fv4i8Pvew=\r\n=M1+7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.5.2-beta.0_1675884593134_0.6505520044829578"},"_hasShrinkwrap":false},"1.5.2":{"name":"@slashauth/slashauth-react","version":"1.5.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"5935d90416a711ef9e77ccdd13ee10dd0fb420cc","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.5.2","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-/cAhuJo5FY9AMxUvMR+lNaC2V1Tt+v9w3MVz4SpI4qznRTF08h/7FxZDdpoEn7qZFYUwNk846de1KJdEf1Dj4A==","shasum":"673f8dd3e0e4b1879e8d59d64f354965c5a6b1d2","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.5.2.tgz","fileCount":174,"unpackedSize":680409,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHyqL40lC7+sAOCppXV3qK1oPo9YuBHDJNDihuwu5WxNAiEA/7CEJVSQ6SrRa7PmDeSp2iVPhSxR0t2+A4fh3jX/NUw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4/iTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMqBAAjpBkqWo06cohte+/s2Z53U35/11FKVzLRL2DnMLNhQlrDBu1\r\ng3Xyax1+sV2hY2dkJ8oYVJeidTgqDuHVweCk4xqdEC0FAtA4PJTf8OXflFv4\r\noQqlMjQJuIOBHbkTHAT7mgqqYxayI4JFO8BNnSNr/SU7GH1MGvilBx8aY5cu\r\n7zFXqeBaCQvb1jU0Om8Vl3JBBu4Lf47fTPlKfxlgfz8HwQ1dpAtbbzfbGqxa\r\ngjP5CaBjg3eSGbKRovIGLjTPmsjL/M7jrjUAY0OgynAE5peMdu84rfI9Slvh\r\nT8EdPCezLPTipNz8Df0xWROnBZWrJhQ3Kxz8Ks2EKlIJ/L0izNDeLl83TWbk\r\n+SxHYwQWG2XNIlumdOBbCD5kxPC/UJA4hPA8AGnZOvI4yLAHHg5yUUPxkk01\r\nja4tCbz1tJrCoyu4rAf2KZ1mL9y6xzlzPDw6NGShdqP5viOFxWNys/3mwC6Z\r\nWl/PQFQJeMZungJjHKm0hP7iw88vr+9hCQY4cO5BxTSanHPpKbNcXOxs/Ep3\r\nLpgjL5Zu41wphHH7Ojj2y9Yii8wxrlmoH1qkWyXMVy5eV86ypFfPE7LR8dPn\r\nWxReq9ECF8xJSFuH9PJKV/RLywncp2sgsAo/HMHOueke0T4Mzfh5aa9rf0eY\r\nhR0dKCK2IxUacgoBcDhluLkgFvLlpyfyD4U=\r\n=0vdW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.5.2_1675884691553_0.9416410917035101"},"_hasShrinkwrap":false},"1.6.0-alpha.0":{"name":"@slashauth/slashauth-react","version":"1.6.0-alpha.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=18","react-dom":">=18","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@radix-ui/react-avatar":"^1.0.1","@radix-ui/react-popover":"^1.0.3","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"1618c85f50b0bc4f2f6ddf60bd66cb41d7df215d","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.6.0-alpha.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-sWkKUvrUdJbmDnDtw2zWS/t9iN6vcEJrOAWVixs+tXX27QEblA3YQh6jKtaQ2Z6HkWSRs4kEiRBzEuN/QS+9fg==","shasum":"fcb9cb397edf505bfdb12a060d4c5d979f1f2b32","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.6.0-alpha.0.tgz","fileCount":162,"unpackedSize":816875,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC88JVvrnbOEAIVM9mHnyaBYPN3qGGVt6xgkuZZ8yalagIhAJVNUH/XcPYmyt9LJyYf7YnBwsGfKNFTDPt+jYU3vy/a"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5rsPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJmQ//bZw/NUJm1LRzoSRMf6XTBYKRO31h7NizWJ/hlVhRaGSwMBtp\r\nkOFnc08LNQh2232c25YgLO1hFi0OQR2GXrP/KTulqbZAUAp6Q1tBd7DlXdFi\r\nZp8tvbwTzO9ytt7gqv+/D3gfRRDAZr4SDxaTk8s2lo946OG62eyHLRp3xbIa\r\nCowlKyveiheAfaNU670kB8Wdfh55uPGHmeiD8IU82etjuk6F0mIyo63qDrHm\r\nvfLHaZ2iIJzBHyCoLcjzPRwj9BQ253oHRMKFrCWPTvoTlGlb1l9A1HSDroNO\r\ny8Td4uH3nj1iVSnh5e9/vzvznCb0ZwyV3WZQMex7GDsZia2WjAHCyAQjCVfn\r\nW+oM3NZKECOWaruGX0c+KEmxgonpK+TSoB/4C42gzZONKDqyOv0/qb+n6GMl\r\nxHnihi1QS5NaM12Lo25e7ayvu8PCC1My6GZvbpaA8QJ3KthfIOZMKEmjk2Z5\r\nziJRTuhYo6mLcxhoxbDXd0eD8A9+OcNmdWnrTiFSxiKpGnh3jsmwmzYpQhvU\r\nlokN+ybyJt4sfl2rK9cBgaHWaZLtg8hanbB3Pevlohkb1thfkgT3LI0yRw8C\r\nW0vdxCwTYiysdfD8rxE0gYFVUVPl8aOEWqokCO6ZqU3IFmEa3vTPw+9nx9vB\r\nO+LOITSrsPIfcg/8dPn39Zq+YnFVoaT3DJ8=\r\n=3QKP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.6.0-alpha.0_1676065551380_0.9826637518846422"},"_hasShrinkwrap":false},"1.6.0-alpha.1":{"name":"@slashauth/slashauth-react","version":"1.6.0-alpha.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=18","react-dom":">=18","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@radix-ui/react-avatar":"^1.0.1","@radix-ui/react-popover":"^1.0.3","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"9281e832d8c72054a5f1d3e04885e6e36d6372c5","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.6.0-alpha.1","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-VHl3yS2uIMusXfoqooAdz8+COKLdzHd9ll/tSjjM468KGgact4P/Ig8KQQAOllujuwhMBjF03CV5fVx2phyJ2w==","shasum":"7f430573d9f9903ad755770ec23a23764cf8ebc4","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.6.0-alpha.1.tgz","fileCount":162,"unpackedSize":817069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChb3Lb4k66jsCZWKHDqdWC3ocETn3CnucSPpZYtLBHwwIhAIro0bh2O/ZZ+9v+HGKc9ffT0+CVZs2lMqAvVzPCi1Wa"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5sCDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNqg//fTDOS6qi0iViPvFl4oNqa3QUP7EO0JBArKk2mimORksa56/g\r\nxXHaJJlQMXX+8ksvaFy1Vrk0sLfMtJw84r5W+Xs5iT5rcSDGVSDJktIq98Ke\r\n9RyXdN5zhDh1mzrhingPmD3pM8MbftuYo04SEPHXeMND6I0uKCyOs/vYg03N\r\nbYUw9135OSXyqmP8msTMCuFS6y+XgTcMs4zOaSArwW6reIdLvWnN6csaw0bt\r\nvaWjHok4BPFADNcqQ8NiQ2v2yVrxQCm9almwRhTif2Q1WdP8XHvE6c2jSeL8\r\ntIF/KSsGAp+CV1AHBrTryr1ISxBnuRYyxcmfbztLNugl53AWSt1ohx9OKtBz\r\npRFvMuaVabi8fWMENcd5ihPeefT5/mtGW6j+qxgftcBB+4PblR7DGTuctDlb\r\neMVqsMUYNkvwRErQRM0uzchdCbR75oBYyH4MxeTTlxFzb6dL263ntoki03JA\r\nib7x0eLHyqLYxGxc8sFD8WYoKUvwtV9ElHfsTmn2MCyWJy4gY3wcsuz+L2jl\r\nfoXRmQebZo8xd9s608jAX2/+rPNaqBhXpdXq7pN4B9nU9x/lM/yYlNcGvlwL\r\nGnaeHk8m5ivA5nwAr/mQklGIXQGk8vmwOM5I9BEkAQ1ISmKWClajW0+SAd8t\r\nGZUpeGPfsePx5ZL94bIak+5mh3MbvphPTPc=\r\n=GWhE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.6.0-alpha.1_1676066947521_0.8624973259248467"},"_hasShrinkwrap":false},"1.6.0-alpha.2":{"name":"@slashauth/slashauth-react","version":"1.6.0-alpha.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=18","react-dom":">=18","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@radix-ui/react-avatar":"^1.0.1","@radix-ui/react-popover":"^1.0.3","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"13eb54c921dad39fb521da5217d0fd79a3d895fb","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.6.0-alpha.2","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-vfe4WV6s054KJj9MJA7+lW4in8mT3/aZGyh2L5rOE6tlVk9QDQb+YhcrO5ElQq2Fkm82+QqnEVrlk0DK/uaF6w==","shasum":"a8f9925a769ca44176fa5e29c0105c8a41ca681c","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.6.0-alpha.2.tgz","fileCount":162,"unpackedSize":817101,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE733xk7clLKWrRHGTQSqbHxGUCpaONAzsoBmNxqLUVdAiAUpbVbEXl1MZyDok2q+WUbtmpriPsJgZQJx5L+tOrASg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5sFSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsxQ/+It5VG/mv0RK/rN1OoDjqBgbsjp2H7hvwt9R8/9bmxyjASBxL\r\n0sXo9rPS5RgJoVzlBYdlZxmytOaVhIq0WBU64s3k0sEIyyi2cMHDoo/ykD5/\r\nEPJlZqXZ96USPHmbWfxE25BrNmJfhLZZkJyLhMJIt2aEDDkR+U9P3ufu947O\r\nlpRKPp/6k6G9FkvZ+bOnq5bDxxNdyDHTB/y78Jeka6vV22AWvjF6QExF/jhJ\r\nOEEX4UnlAtYqS+wCtp2kr0PvtWxUg7IYcV406nnVhXhbdfOUDLv6japis0h5\r\nAJSA3LDNRNDzrkc/ycGN8XmoGKxWZUGW+gvfWO0TTmGKcQMASt0NysZNcynu\r\nvQ0Q/CbZNSCh2xGTyOLkiBjNODfWFJppkiRFPPpEqFQDoAFrSQSzW9rDvY2E\r\nfj7MsSrzb0amQXNaCcSSiyt1WAKYjCaF3LHDGCN/VI4tQDMdc6/IbvI9Xir4\r\nVwcvqgYKW0flH4wzXDmsBkP+PusTMAOXGg02Yhx3PDcbpH6n+vFfQFVylNHb\r\nfsWerFom+XxUvTCBFugDDtKEUiw7hHoUGH4GP3cWAsPHZuSaGRhvLhkkp4T6\r\nGEQAGgUuzeDL1Eyhphfr4b2PcCSbdgAXRfKxXmfKVsGRRrDjKHCKxfWCIcSP\r\nA4sdnhVPuXna/efbe9cSrh90YwYjUYZ93Sg=\r\n=bgR6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.6.0-alpha.2_1676067154724_0.1329659328149757"},"_hasShrinkwrap":false},"1.6.0-beta.1":{"name":"@slashauth/slashauth-react","version":"1.6.0-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=18","react-dom":">=18","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"d9a257030d5820b46aa8a47c3e068513bbe6286b","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@1.6.0-beta.1","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-igJtXWK9ZBYlJvmTsnjWSxrH3c9tmx4gR3H0y128M+IsYkUDqBexwWzbmGH3Lc8adD2W3RyZhALrLsqx1Mlqnw==","shasum":"89deb82a3057d81a3f7d7d2ab003dcc59f562ae9","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-1.6.0-beta.1.tgz","fileCount":156,"unpackedSize":674733,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2lMGkSoAJ1EJnWZITly8lTroZw/uAfGol/bQoPmqeJgIhALtxSxreMw9GK9hTV5Pg5pNz3E9s9yLctzYmVrFcQtt7"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6tHFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmchAAjQCbZ4ML03CBhduMM6RraZCsDnVI6OCZm3MfE8kBLRrlqwH1\r\nNLqG8s00piow0Mm6vTAUDc6I7o/7VQPzJX+VlWw26Pz/QpBL0GsEVJP4v1MX\r\nTn6KGf013kfiiYvmllIBWQ3tf0FiJsQzTqpXNqhGmwbUkAsi5+IexRY9m7xm\r\ns7F4eRBHdDGipMVFe1iHpFYMh2+9K3ysnZya1gBQ3EH4FvX1W+/XZ2PVCvRh\r\njiXJQMmt0p4jfRBDeJD5xZNQsU1ZKBYWtIW4vRJc0T/CnrnuCSPZLtJHA2gX\r\nfgM7AhTPO86KNxWe5skPF1w3Aa8tmhmJ7njRNaTGrTsMyM2hxH2/y9Jx+n9R\r\n79pgDNKdHEtz7ODgyK7Xpd254RM+I4XJj5LnIQqnao7915rhwbHdX28e02Cv\r\nLnbXT/X5BKhpgQmjjztqaTJPyPYBzdXNqPlmRPulZhikJo1Wg6qMgRgwve+/\r\natLJAyTXLuGVjvLVp/xVH/7RSLG3pkED6Jp9weNfwEXAq3Q3ykNObVhs55sV\r\ndwY9SDF4o/TSVueW9PwfZwT1/kNvHTaioE26QBi4PNVyeRs08Abu1/7qiBta\r\nrEsqDdDpnwA7stwD+mJH95wrGLHfNCqjiYCfHUPEm3E3gMytbcMLUoJavt/p\r\nvo8/O+nh7zFUje2zpIWDRCUDWGrY06l1UwY=\r\n=7NUf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_1.6.0-beta.1_1676333508740_0.9764287092785207"},"_hasShrinkwrap":false},"2.0.0":{"name":"@slashauth/slashauth-react","version":"2.0.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"2a8487acc31860912781927b70a4e76c0e5b02f5","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@2.0.0","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-ZccGCYnV6MMrz5gU0nKL+lZg6VUkLUwaSkPyt8uG+/3d+JX9ORW5UsiSz8zft9tDv8AeOYYPoBJSvQWw5CGQIQ==","shasum":"6ef2ec3f2646b038a7bb9446d87eba59467f617e","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-2.0.0.tgz","fileCount":156,"unpackedSize":674726,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDjvPVEj3xeHk/0baBfos2eySpf2241Jux4VjyQ1peZ8AiBxPx4I9BxnFRjkEavoJLzPv386gtn9pK5qBDWDg/gUgg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6+SRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmri8g//XvLLumTQGYD7BZ53oqixmE8Yf0q++oGiBaCd7S6kG9hIEKKk\r\nzJDWoJkK6E7exsvPF5pKc8ymkuG1t3Zhti4D/VO1mVx2esBI8lXQQQIRFKMa\r\nIRtE0OOyBbEa5rhMZMnkAm9b2WdvElbGUKHclbodO4gWol2A0wJdNnNG5kpD\r\niPPBL8V++sLEmyZpeJP+iZ/jYIUTB6ZN8GlLrb3tFyfqtgi4WwMhP68bel/v\r\nJM51QYdE6KxB9v2N1rYOLXzdG+0sQWjei4mezALsx/fpSZpbRYQVBecLSzHm\r\nzvQelopbbC1bUADv5jc/rB1XxkLfKwB7aQCwpvIPDpvBh7ZM1XJCWrg+iNlb\r\nmdBGwJqW/whJ//Hk8ZMgudVwA0BD24uPnzObtN1cNQ3WlLP8fWOxCWzEzW4T\r\nWsWr/nNVE5Gf6Xd6jGiWmMwLr9aR1wPpPdBZCFy6ehOmay6duQErTdAr3AjM\r\nhF9dNpqL5e9M7J/F7DFkBmzyMDr1WHfH6QjYxThlB5tZKEYgv/20UognlZ/p\r\n0yPsUCMVEEUTEx1J154hi+U85GqM+lvTV7PQk3ahqHpkUNuy62LGVkeVcRmC\r\nLsUoK4DlcQ1zjc4sDodKpRo76mRpSBoxH8s+hlDmhdnAnNvpJSZkq2vFI/sC\r\nRKjUnP7m8D0yQKSY85eTA2Y8OdDX5YbTwyI=\r\n=oAE3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_2.0.0_1676403857558_0.9553195621272053"},"_hasShrinkwrap":false},"2.1.0":{"name":"@slashauth/slashauth-react","version":"2.1.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"9fc0879811f39366d32ff96794a3e63d7527209a","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@2.1.0","_nodeVersion":"16.14.1","_npmVersion":"8.5.0","dist":{"integrity":"sha512-r50HJYejhqKZh+iXDJNZROGetT97i4FpJykB+kFnVBIhIpUu0Rrux0LQ8XFcF5Hens+XU/TJ0qNoPBegQFBxwg==","shasum":"2e97cf72f41c4d826c49da19d6d36a8cd1bea0ec","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-2.1.0.tgz","fileCount":155,"unpackedSize":680577,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH8wcZ5JbiprGwRyyM54R1h8Zv/h/hNviPu5wTP2fPNpAiBWpMBI+JZlVYAn+feHby0D8h1hhhBb4reTQesT52mD7A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8Am/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAcQ//S578AnIPTGa0M8pjJELLeh6iGzLNlpLSFMcgC7wqRiE94rcU\r\nTHQ2OQIBGLUGAOD5I4B33sR63p5si1biigSctVNSlatp4qSm8Yj5yF8zDS0P\r\nVLRUiCq4crorgimBuMbCBW7ZYlu6GLMEcNjs/8MM55hWGuIWcLAsrIZ/qgCJ\r\npLArhbXB7NV1P9c+52gqtZuh/ubmmrC/sKRZUx0EufWzH8wK7epdeXxj7eii\r\nwiSGfythSsHvuPJM1O7cXFgg7xhMkqMFXd9snrHlPpc85GMzEdVyoT4Gi9N1\r\nrFuV+ccJIgp8gpbqyUmOeT2q2Ob/GCefoWgG0AYk0iT8z/odxerxU8SDy9X2\r\n9+9xuhFODq2C9h6Dy9STd5L2RIt0KrJFTzNMUetesy3m8yV0Ck5atSjq25HV\r\nakZDE6BtLhSohpf5RgrNTZl3AXWhAtDw5Basme8lez9UBy3LcFYFPEGf4jBo\r\noB9irGW0x1s5Ma3vBc8SRBSKFUU655MhHTcaJEdSCJ9nc24EjG6GQvG/VXls\r\n0MeCd1AwmiefMF3UJDtLsO4e0kw+P3yMZI0xSoF1DSOuMq5n1Td/WQ1Rpv1n\r\nh3ki0L7mo6wR+LnOgnnnQRQzI08LFpZTmMTMxAl3pKMKhzN0dCQojZECO0M+\r\nxqI/VdhSIKW7IqjbNmY65CjNL0QdUxr7+xk=\r\n=aimU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_2.1.0_1676675519369_0.06476230138794259"},"_hasShrinkwrap":false},"2.1.1-beta.0":{"name":"@slashauth/slashauth-react","version":"2.1.1-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"7c60d1cf12d524382b3333b438cb0d1af173c53e","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@2.1.1-beta.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-YO4y5COcH8WpUsl139CtI+k+KAkFU2AYIfZlKg8AjVEuTfBtnRZ+aFwm8Og3y6M7qCJSl5fvj8ja1lWIU5fJfA==","shasum":"0ced7b6480a35b6a64cbef172630f006dc50ba85","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-2.1.1-beta.0.tgz","fileCount":164,"unpackedSize":683583,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgTvYBuONbQUk6waMVF4ICs5cF6lDhcDV2Jq4FaAFskAiBgAw0W9K5JW1mlOFgXWYeKU9AVRe7QOPPTpfMULcgQ9A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj95lPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYGw//Ze67kCgWKuTvc9yaterkVFUbYPOvXomzQXmK4iaKO2SeTiNF\r\neWSwOqUSAXuoYof7+GWzXUT+hvtPo+2WXUNtLegErEAAIEco0IQDaJYVWunk\r\nnHFkP3i+gC3beLymSpZjI4LgJAwjGOFsyaqjRgTw9gmTB5GTl2HGQtwrBkv6\r\nkabk7hdDbjZEyaDyIcuD/TbemiHxIlqnyodouaAQ3b249a6T7r7nB8x4NoDq\r\nWMxBJ/dhSGM9TfZOYIO54Grjwz5BAbsh9hvjK53tMaaO6jSIFleW0ThBFZlj\r\n1dhvcTy6c50Z3uyhLybJeA4+SLp+P19RN02N1AnUWkaRR1V3n4Yh8S5QfBwy\r\nEZhx4IHlAcTNs9xAoTnYvnj5DVRz+gTFwCfehLnMnwZ3XQb6W+5ki97DJvBC\r\n19OIKqHf53sp0TvKAi7mzQ3AuUnjEajQTMrEbOd+LbF8/wEean8YUi1qrukj\r\n8+PJHeWaEgygyRdE2syYZyHHEXNnjEPL4Y70xpUTfly8i0pCqh4WEtl7XFWz\r\nxKGk2zxsjJ4OEclaDzhc7bicMqXjF1INiIkg2AAEMiif/E6JrjRTNEdVuII2\r\nMY9XIStu0qKRmVorfFmR0hmjgL7hBn4qLylOOvUepIU/yHHsyWT/Ax+0AVxV\r\nnGBz0O1w4RhR3sOeFRv0r4701OUTq3b1nrc=\r\n=TW4I\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_2.1.1-beta.0_1677171022706_0.8083670740024647"},"_hasShrinkwrap":false},"2.1.1":{"name":"@slashauth/slashauth-react","version":"2.1.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"ebc8ee9fde238a766a223b00f3712f5d9cb78bba","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@2.1.1","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-0vkt8dBcXPLsHaORnUOFSS2N8cUsr9m0gfZxcElXUMMfy4+TaTS68MHB2nQLcNGI/uZmEH85rdMdY8MK98up5A==","shasum":"7f65998dbd144ca5854b784b6a5acb882b2b494d","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-2.1.1.tgz","fileCount":164,"unpackedSize":683416,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICiKMOF8GhfNEjxKC5em6l2NECV47uhO1mt4wd1UQk7WAiEA3iSdKc30o/Jxo4FSux0b4fHHXLAP8SkO+qPe4NRxi4E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj98lEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxQw/+NtkVR204UYSExQh/mhDGQ/mrH/1Dfi8252fikI8UVGqjTP3h\r\nrblN/G3m1S3bStXiofwnHkHlghUecr5Tdnvayp8u/D6YEsSZkVBeK4qOggfX\r\ndGp45bZ8GbrkKnqNcH5rIedn8XtR20cDI1FcGDXSAqODNjqkY4XfRLwsTJbM\r\nRb8dHewKPr6x03Ywd5jebRufShbahEOm7acy0Pj6qdrht77bUbZao6XODTuE\r\nPH2MIkWH5iOnrVbGeWdmMAkoj09kbhOKMdWJzwcM5RNyPemlJT4XJa+7BQXu\r\nrvDaddyS/VJ5klB8RGNFZYSkjJn4nBdTsGMoCCrDDuSsVhSgzbH+Cj1p7U/Q\r\nJ887BiU8EMI054ugU8AxSI7dr310j8i0tEH2GI8xI6Qju7DVLpvM+O3wqczP\r\nefau9KsrPLqU6vpaJJZilTop7zKHpvKjnUgk5ddRT2tNgK3PeFZqHDiT+8HU\r\nShjuURydEQJArz7rU20dXNYAUqO6LZMmi4SqPJ5AeG2T8xn28Xlf2EkiUHq1\r\n2ALny9o8u38lyoDZTpKD1VzPlGkCBzpeLbvoHizxsp5iQH98VK1QqvSqSCrl\r\ny3jqQ3+kPIPM9VCjcVB40FpyTPjQk0WrTkcbpc5qFRymClsyLitLhH5gp5+G\r\ncq43SMg68KZeIzu2K5uYlTJPovVoBbIDUkI=\r\n=Dg9d\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_2.1.1_1677183300677_0.3289552337921102"},"_hasShrinkwrap":false},"2.1.2-beta.0":{"name":"@slashauth/slashauth-react","version":"2.1.2-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"bb669f020ef72ef580ade25f17a053b4b2dab173","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@2.1.2-beta.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-knqe3VQSV6LVfLPRMPg/bvL93xKbbKkG2AzOKtQvwGPNh0E5NuWfi6WxFPPJwL08BY3GQNsYdOLaiiqTJNp37Q==","shasum":"3b3d9482d039c6f2a0787b7d8c4c5c46c9da1336","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-2.1.2-beta.0.tgz","fileCount":164,"unpackedSize":683647,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEPYiLK//REWNt/wFpnpP5/18p99PEPFLRorqzEwH5q8AiEA1z5NMq8u9iNoe5p2QRjai/+GshFr6GHYxLVz+PyktDc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+TiuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFzQ//X/Lt0RrXlLPI/dr8Q981hehPSm/VGL1n0M8kAejrY7kiYXAV\r\nXHP55+3Vbn6CtxNwvcqVDAbT7mIKKDZvzMnCnn0Nd1PrHfTojkyigr3thjzW\r\ny4CkEa0kNf5ylMdEtDALQhxg9lulKBIotltktvdDnAmO3Mvx/oMbqTeQCUhr\r\n0u5Ad7za4Tk68xpjRrOGqHNkSis8FJqRMHl6eokMU914vh2hoVj0nquVoM9m\r\nn8tNmQi7YsT9nR66aYZn+se1rvFyydF1Ev15gaPwOSZXCEGMYfBMX55FWrsq\r\nsQYTTMBr6EfGT6kZQ59Qd8so9dzpk1+8fbKcH5C19bdk6XYe4IFfdj9zVnjZ\r\nUdUmDGIX/gX3S6+x1OtQGr0Cg56HXg1KTdU9mtYL01P+wGl25V85q9wikMD4\r\n5LufnZeZHm5H6TyqJPEcViixEG5/8fbNGv+9DGnPOHYaLe6EO9pwhKVdas7c\r\nOIw2omR1r0L6ljkeIhYTpUGGKTKHFHpGb4J8TKs6C3Y0fz8ne+fts0A/WP3V\r\n6aPQHb0hRAOtXE6hTncR22UJAuG3ZaB8rVeQVJ/j0gsGI41LbnbsmFhPZIzK\r\nviVt/RXnmzmAK+E2frYCLLbG3J8V85JyVXaN5RSESdpCyxr88NeIZWg3S/EA\r\nKdyS0Zr+dSL/DldFQmy1I5zNgnwzuHYTNvM=\r\n=kjwc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_2.1.2-beta.0_1677277358277_0.16258756566616017"},"_hasShrinkwrap":false},"2.1.2-beta.1":{"name":"@slashauth/slashauth-react","version":"2.1.2-beta.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"c3e14a40266f2c795e2ddaf932d9c2db743599bb","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@2.1.2-beta.1","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-YkUALGUyKzbJcmjff9TVhjt9lpuD/PRLouj3zs2SLoHp00aaWCqp0Km/lMc4CzjcImQ2EU/3ci33PsWpKytMGw==","shasum":"dd4e8c5678118beeb2a63370352ca34f5e887fe8","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-2.1.2-beta.1.tgz","fileCount":164,"unpackedSize":683863,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUqkCP/rm9eERUkwv8KQy11ktyQBpo3aj/SsB6TMqD3wIhAPgCDN9uX24zRj5FtERDB+8xuy+YC7PMzs+tWgYgyN6G"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+UJOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOmg/+KOhUOefVeRksydy2tac3dskMxV91qocWeE4Hc4YwSzIH/Itd\r\nKoMfhpss064NRalX//VWTRU975cNwBQljQB4VSKiLbEzX+ZHkpjeUfmhxQCu\r\nDjWI0YEDd0yIP3s4mUkCpdREFqP5UfbG8caB5NrG8IK6q04s+7kTaNJu4mFo\r\n2hUpE+ME9P7sqrnEBE9xrsEogIQ2m2xNgBi4SrNM6VVIf+y4Wn2/1C5Ylh68\r\nVh9I3UTtuPa4dvIRJNzgL6NBcMQnT4V43Xe3Kcej5l/cXaNLMUJBrZYev6B6\r\nY4oFUzx7cx1s2HIAgkUW7cCDMmNpoBicOMlUeq/xy7klUjJg8xqhzJGeQYHS\r\nB6/03vfUh3YxkAzI5zvjpHuON3MsFfDflyO8BdOTfdNswOWW2Lmzp4WK7Cve\r\nYSOUdG80nmt8EbExfxVYWefDE8TdJbYZAmc1ZKFNR4I0GnWqGktcfI4FEi2C\r\nxn1l4uBJLrsy4++l8O7mV2kk3lDFG0O4IR32OIiSj4rAAydVMSapkvnhMyBX\r\nQGPF22ABTJNpKbouQBOkxbQfJBBcmS6eLc5jmcJT5SLTxDRHQ7XeUgyB6Jmj\r\nSqFWkjVjVGPDz4uNPzCoIaeyiGXLZmAyUlaxUBYRJYAblhHXmb8rWDtnd3Qj\r\nLaIStRPWHTYJcthox8TIpHN/xJBQQF4+dY8=\r\n=nhyG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_2.1.2-beta.1_1677279822204_0.976391994848314"},"_hasShrinkwrap":false},"2.1.2":{"name":"@slashauth/slashauth-react","version":"2.1.2","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=17","react-dom":">=17","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@heroicons/react":"^1.0.6","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"cc66eb900ffef724643ba2f5e412fc0d9bdd2bb0","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@2.1.2","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-09hVRumLetkWpUSkuq59FMJSAd0SDr1SGPGwULdlFhFRsLeCWy/lWEMKxZaOuz5/Xth7WgxRWWt2JK/629lRLQ==","shasum":"783698ff6e77e06fbcc755ed0a19ab156cb0fd7a","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-2.1.2.tgz","fileCount":164,"unpackedSize":683856,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOzz+vGTEbxzvQ4C1K7yUGslWYxvre6RA+7Owlpgn4cAiEA6Rm6xDyL+MPpgdEqlyKYCOVn8xoFXhtvIcuDKmIQiNg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NXRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6Iw//cmj9ZyfA9wgLGVAr7oqd2kdnX8bD+NfnGYYdv023JMlii5h6\r\nu4/xa5Ue9yQS4QGOm+Eb/LAuWOuEovF2C3GZwQan+cpAoz4ZFXmUFmhrgb9A\r\nUgNra3O/laLt//R+wdFpq+6rKrTBjkgd/kPldMUYgfuC4RjvrrIMUr2bxjil\r\nRfQTUqx+XcMce4pJeciXcngS8kglQv4GTY4jlfr86ilv/+jTTnqiMkYObcKy\r\nMlC/GJ6d8CKv5HRwBTcRIy1uZuirYis64IcglvpKXmY1MoJcSrqKVJLOg+Ww\r\nUrpv2fJVcJ31puCBzCeAuPIKVtt+yqd+Fp/kEy08GOm7czpard4u4EjeSQFh\r\nDLM4q0ehXjru9/8X4WI5Y01HEwGQnR1Irn7bpaQUb/0bfaxFE0mfQoeWBy2n\r\nuljxDHlIk2ZxkAjg5ym28aqylT91servVEtYH34+d16cBTQL2jKKu2fo3TQN\r\niESW9sHuQjtjj9+n19qJln5nmvp9FXzEVP1K9mWuTZj+g2t7628jf13W1vYR\r\nQhQUx0qP12TlnHL0OCV55EfaSmluAYO8yPDGF2ho5fygUNqmYnzRMqeGneRt\r\noLkEbyLCjdLsyAQfH7em3X8ks3PPSUm4yvqqs+saJV3w1i8DEM6e24rMrixa\r\nwvNNyuyddE638gy/YfZ/b1DqEyzHf+VlZ88=\r\n=vlNe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_2.1.2_1677514192875_0.641426748178926"},"_hasShrinkwrap":false},"2.2.0-alpha.0":{"name":"@slashauth/slashauth-react","version":"2.2.0-alpha.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=18","react-dom":">=18","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@radix-ui/react-avatar":"^1.0.1","@radix-ui/react-popover":"^1.0.3","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"9179fb027c39d11206eab412ca6147f0afcd9c4e","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@2.2.0-alpha.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-QV0v79+Z1pnOyXSPbY2v+A3dhCjlwzSGua3rs5Lr3vi8xktQ58ZMhLAaqW13uF98f4Cg7towdu+QurIHN3HOdw==","shasum":"2738927ee7ed8695a56abf3c7ea6ad44e09ceb7f","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-2.2.0-alpha.0.tgz","fileCount":164,"unpackedSize":790618,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1X7w9AokNcWJ8E+QaqPyLsYjKB+EESEpdCqKsNoGUdAiAr+R6VhVOAEGsHS+p7utjjG66qfpPvAUypBMQXU9g8CQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkADOzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqyA//aCMNvmMSLv+Moowlsr+rLTikhXmAiWLqXgVT00sTDQoZEDZd\r\nAiR1QK/OeVd+ek+liI300opSQw22IaNu74pb+2nJG7YzVGyrf2L7qmxgHGHm\r\ntKK6qlzVHroMvLW9KaFjz8II6kEDc0u/MOwp0AfysbAE1akmdOOXewKGT4uv\r\nJxD0xhE7UgzdjTWBcv9NbB3p/LblxGZ3GCPutFamsILx/Kk4xB2+WkG5tg5m\r\nKZ8Jk0PhB3p9uKlClGPxt8a4S5Z2pF7KNeABG97UTxcsD8o0+xDlSQ0sstSj\r\noSkMVQt5xn1p9MDlQaP4j65QxiTGTTDGedzBrEfPfoWmT02IeHMIlMG2mABa\r\nHndLc94yDZCuGJhG/hA+wrVYrODesHTodhAKgQTO9tF0pdwfQG/9cIN1J7im\r\nv1rAkAkyIYjCaOSTXXPgAnqPUjchLpJjBpZtYZ1cvPJBdlHNfIYxM8dgj8w5\r\nJK/XwXDgzj2/70Z0eFKf+bSbgnu0u9/HYqxRPn81dqzihrTed6JOGblNGIBi\r\nTqVWlEPBhg1sZOlfxGPfzLw0lH2TJpC3ifrRyWXnfTbLCJcAKrKM9s2A3rvT\r\n7S+TaXrzIx6kJEE9HlbhD1AlEjoUoz5etTjqAjnrXBtpykfHu0PqdKGCtI8/\r\nsAYNsUCqgfn/I6CCwHMIxYJfuVSzoPLvBlM=\r\n=dOIW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_2.2.0-alpha.0_1677734835403_0.48242481101380563"},"_hasShrinkwrap":false},"2.2.0-alpha.1":{"name":"@slashauth/slashauth-react","version":"2.2.0-alpha.1","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=18","react-dom":">=18","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@radix-ui/react-avatar":"^1.0.1","@radix-ui/react-popover":"^1.0.3","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"1879f005397618d129df4825bc87260c6f03cb97","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@2.2.0-alpha.1","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-4AIve+Qe12V+EoBLvecYd1vAP0edg+/smgUj8CS+1TtrjUheE40HQSFXFu3uYnSKsjDUDdHos6qHmX0GM4sjEg==","shasum":"1922c3100e9beea806da960e6f91749f0339037a","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-2.2.0-alpha.1.tgz","fileCount":164,"unpackedSize":790616,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFhPE81VNuRD7R8OE3pfFKoOOurPgphb7XfuOIPQb2L5AiEAmQCB1hRDVOAr9+N7/LR4Gf+s6xKEKDw9+Zyr33c+o3A="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAQQrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopXRAAg5hlyV87fE6zZlcv2OoSg0YbC+ZTzSuY2/wffWbDZcr6daYk\r\nDkN6pXl69nTStMt/98oOKNIDJaIPmwxp2jNiRU21ps1EJ0PwypJfSbzdp+ck\r\n6BY8n1z5YIf4rqlXK9e3KnpXaMKw3KynHeJdBQbntOsx202gbT+1WNJrmktN\r\nAE/usAB2pjmezqA3GeEjX2ZPrWiMELDJmXg66+ADDgO6uGBGNFxadwtAYyeO\r\nwHED6sGugZLA7HzosiTbxyDxBP4BNw684eQ2AGASQXaabXzsFTBu4GfDlnRN\r\nKnA8erPs2B2yBk+GLkjvQ689AbapNkHz4hjKC6RCB3GQ3nlYI2fO2mpiOXYE\r\nxJUZtPiJZYAFL2/Nf17JE2+oQ2NNwaA0zycrwVWAAcqvnbP9eGMsBQnINM56\r\nUgSnVOkLQ82FtH1cS91P4yvPtJ6TRniMUqcEzMlSHQEB07Wi7wO4chGSj6eA\r\n9V2S1a4JJTqKHVZGlLwLzfsSy8/IWO1k/NZkKvoMuPqKoAU7WS6qA9OaysYz\r\nneJRyRLCICapXQJsHR1IXds0/jxDMC6haSSuLwTfc+0LoNVMXPydDMfPLyvr\r\n7gBDlIDwiRtdtBZpQxVhZn0IPOqLbejByZPHHfcF0N//mbv+ncONXuUnB8Y1\r\njt92djyREapX4xlS+cZiFycGQL5jRyq4NTg=\r\n=4ATT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_2.2.0-alpha.1_1677788203529_0.7097699835521036"},"_hasShrinkwrap":false},"2.2.0":{"name":"@slashauth/slashauth-react","version":"2.2.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=18","react-dom":">=18","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@radix-ui/react-avatar":"^1.0.1","@radix-ui/react-popover":"^1.0.3","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"gitHead":"3182481173b9ffeb9c1e7c61175d28e805e00520","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@2.2.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-qjrK9lWnlOx8C148Qimm2rawaoi9Yiv3U/87Y/QfcOxggLeDrQhsH08jkPHRT0rmSx7TNcC9i/La4F6+FNFtSw==","shasum":"62f6d20bdfca35d679ec84d5262e6520be4418e2","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-2.2.0.tgz","fileCount":164,"unpackedSize":790608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKmOsT5u/LPdyxI1x8KkZnm9E2+AE6iiz1ZfBRRrvBLAIgMCFigyiRrPqxWaPw0Wz89xgEvB8xg+NuCVTLLeFv9CI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAiKwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLvRAAh9vu0FDk5E4brQrbb7kEGxRxJSdt5KJ/L43sudm4Ex0GN6LC\r\nRISNM4inBSc0ldVGbEUoLjP9aW73aumCUh8QEScS1/ctIPSfOzv68qQJv0tc\r\nI68YhfFJlKS66CsifSbFIl1+kdNpNlNa/8DCl7NRB0OAfhrweSGa9ZMqfEFM\r\nXjHjkrqcitx64Hx8Hh7MMcPI/SS2cqa//96TkgBgSHP08D5r6FqiOoKwMowD\r\n/pz1kQYclqe/o8tStJrpPFo8pDJqONwiIfuJfsTHWAGdIFSFEuFy+fvvxdrK\r\nFialSWCFQqNXyAPRmAS447Z93i9Dh0qjZ3BokdqgVlG9oEDHKYUTMjOVqUMX\r\n3vIXEiGbgxQEnRYVbS+nqutvaDUB6e+fJtLYtpkaZGWB4lAYWQOnqcqcWasF\r\nOps9sxAq+iyag4A8OEHpKEA4YTLGMR99zv2XrKuTTVLdM9svoafQoVCQwkLZ\r\nQFDeRiZfyHo8F8oozJtBxpOZQKzVde+gU+Mpx/oHMH1nB4PvPxwWCANBcCFP\r\noVp+hB/SjLMhm+WDdUHqVW7P+r/RTAxE+Wxd8l1ydOm9hIapeU69rKShBKF9\r\nhA4DP48vYDLrZwa0PQG2kQPaK2yGHFaU5NQGao52idcji4UaN5ZyOyaTha9h\r\neKJkecXvbJGGJVfQTjsysBnQe2JJezSNgg0=\r\n=sLnP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_2.2.0_1677861552194_0.13048451662303795"},"_hasShrinkwrap":false},"2.2.0-beta.0":{"name":"@slashauth/slashauth-react","version":"2.2.0-beta.0","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"description":"Slashauth library for react apps powered by @slashauth","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"prepublishOnly":"npm run build","build":"node esbuild.js && tsc --emitDeclarationOnly --outDir dist","build:watch":"node esbuild.js --watch","typegen":"tsc --emitDeclarationOnly --outDir dist","typegen:watch":"tsc --emitDeclarationOnly --outDir dist --watch","test":"jest","test:cover":"jest --coverage","prepare":"node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\"","lint":"npx eslint --ext .ts --ext .tsx --max-warnings 0 .","lint-fix":"npx eslint --ext .ts --ext .tsx --max-warnings 0 --fix ./src","watch":"concurrently --kill-others --raw -g \"npm:build:watch -- --no-minify\" \"npm:typegen:watch\""},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.2","@babel/preset-typescript":"^7.17.12","@esbuild-plugins/node-globals-polyfill":"^0.1.1","@esbuild-plugins/node-modules-polyfill":"^0.1.4","@types/chai":"^4.3.0","@types/jest":"^29.0.3","@types/mocha":"^9.1.0","@types/node":"^17.0.24","@types/qs":"^6.9.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.6","@types/react-transition-group":"^4.4.5","@typescript-eslint/eslint-plugin":"^5.15.0","@typescript-eslint/parser":"^5.15.0","assert":"^2.0.0","autoprefixer":"^10.4.2","babel-loader":"^9.1.0","buffer":"^6.0.3","chai":"^4.3.6","concurrently":"^7.4.0","core-js":"^3.22.4","css-loader":"^6.7.1","css-tree":"^2.2.1","esbuild":"^0.14.38","esbuild-css-modules-plugin":"^2.6.3","esbuild-node-externals":"^1.4.1","eslint":"8.8.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react-hooks":"^4.3.0","ethers":"^5.7.2","husky":"^7.0.4","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","lint-staged":"^12.3.6","path":"^0.12.7","prettier":"^2.6.0","react-is":"^18.0.0","style-loader":"^3.3.1","ts-jest":"^29.0.1","ts-loader":"^9.3.0","tsc-watch":"^5.0.3","tsup":"^6.2.1","typescript":"^4.9.5","vitest":"^0.20.3","wagmi":"^0.11.3","webpack":"^5.73.0","webpack-cli":"^4.9.2"},"peerDependencies":{"ethers":">=5.7.2","react":">=18","react-dom":">=18","wagmi":">=0.11.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"lint-staged":{"*.{ts,tsx}":["prettier --write","npx eslint --ext .ts --ext .tsx --fix --max-warnings 0 --"]},"dependencies":{"@floating-ui/react-dom-interactions":"^0.9.3","@radix-ui/react-avatar":"^1.0.1","@radix-ui/react-popover":"^1.0.3","browser-tabs-lock":"^1.2.15","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","dequal":"^2.0.3","es-cookie":"^1.3.2","eventemitter3":"^4.0.7","https-browserify":"^1.0.0","immer":"^9.0.15","is-mobile":"^3.1.1","os-browserify":"^0.3.0","promise-polyfill":"8.2.3","react-animate-height":"^3.0.4","react-tooltip":"^4.2.21","react-transition-group":"^4.4.5","stream-browserify":"^3.0.0","stream-http":"^3.2.0","url":"^0.11.0"},"browser":{"crypto":"crypto-browserify","stream":"stream-browserify","assert":"assert","http":"stream-http","https":"https-browserify","os":"os-browserify","url":"url"},"readme":"# /Auth React\n\n/auth is the easiest way to provide login and token gating to your web3 app! Get started in less than 5 minutes. Read more in [our docs](https://docs.slashauth.xyz). Or if you want to talk with real people join [our discord](https://discord.gg/9cuDEUcpRD).\n\n## Features\n\n- 🔥 Login and token gating out of the box\n- 🔑 Security for your app and your clients\n- 💨 Fast and lightweight\n- ❤️ Helpful and friendly community\n\n## Installation\n\nInstall slashauth react and peer dependencies using NPM:\n\n`npm i --save @slashauth/slashauth-react wagmi ethers`\n\nOr Yarn\n\n`yarn add @slashauth/slashauth-react wagmi ethers`\n\n## Getting started\n\nIf you prefer, you can follow along with the [quickstart guide](https://docs.slashauth.xyz/quick-start) or the corresponding [Github repo](https://github.com/slashauth/slashauth-react-quickstart-example).\n\n### Create your /auth client\n\nVisit the [/auth app](https://app.slashauth.xyz) and login with your wallet. Create a new app and take note of the Client ID as you'll need it in the next step. Also, ensure you add any authorized domains that you run your app at (for instance, `http://localhost:3000`).\n\n\n\n### Migrating a Wagmi project\n\nIf you currently use Wagmi in your project, all you have to do is replace your `WagmiConfig` component with the `SlashAuthProvider` component. You can even pass in your client if you want to the providers (this is optional).\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\nimport { configureChains, createClient, chain } from 'wagmi';\nimport { mainnet, goerli } from 'wagmi/chains'\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nconst defaultChains = [mainnet, goerli]\n\nconst { chains, provider } = configureChains(\n defaultChains,\n [publicProvider()],\n { pollingInterval: 30_000 }\n);\nconst wagmiClient = createClient({\n autoConnect: true,\n provider: provider,\n}) as ReturnType;\n\nroot.render(\n \n \n \n);\n```\n\n### Connect the Provider\n\nThe /auth SDK uses [React Context](https://reactjs.org/docs/context.html) to manage state and expose it to your components. In order to integrate /auth into your app, you must provide the context at the root of your app:\n\n```tsx\n// file:index.tsx\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport { SlashAuthProvider } from '@slashauth/slashauth-react';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n \n \n \n);\n```\n\nThe SlashAuthProvider only requires one property which is clientID. This must match an active app's clientID exactly.\n\nCongratulations! Your app is now connected to /auth.\n\n### Add login with wallet\n\nThe /auth SDK gives you tools to quickly implement authentication via Metamask wallet in your React application. The simplest implementation is to log the user in directly in their browser. We use the function openSignIn() from the useSlashAuth() hook to accomplish this.\n\n```tsx\n// file:LoginButton.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\n\nexport const LoginButton = () => {\n const { openSignIn } = useSlashAuth();\n\n return (\n \n );\n};\n```\n\nYou now have a button that when clicked should pop up Metamask and ask you to sign a transaction. You can verify that things are working properly by adding the LoginButton to your app and clicking it. After signing the message, verify a request is made and a 200 response code is received.\n\n### Show authentication information\n\nThe /auth SDK exposes information about the current user and their logged in status via data returned by the useSlashAuth() hook. Because this data propagates via React Context, any time it changes your components will be notified and rerender. Let's create a status component\n\n```tsx\n// file:LoginStatus.tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { useEffect, useState } from 'react';\n\nexport const LoginStatus = () => {\n const [accessToken, setAccessToken] = useState('');\n\n const {\n connectedWallet,\n isAuthenticated,\n isLoading,\n getAccessTokenSilently,\n } = useSlashAuth();\n\n // A way to instantly detect when the access token changes so we\n // can store it in state to display to the screen.\n useEffect(() => {\n if (isAuthenticated) {\n getAccessTokenSilently().then((at: string) => {\n setAccessToken(at);\n });\n } else {\n setAccessToken('');\n }\n }, [getAccessTokenSilently, isAuthenticated]);\n\n if (isLoading) {\n return (\n
\n 'Loading...'\n
\n );\n }\n\n return (\n
\n
\n
Is Wallet Connected? {connectedWallet ? 'Yes' : 'No'}
\n \n );\n};\n```\n\n#### Using specific hooks\n\nAside from `useSlashAuth` hook, we also expose more specific hooks. This includes:\n\n- `useHasRole`\n- `useHasOrgRole`\n- `useIsAuthenticated`\n\nIf you are missing a hook, please join our [Discord server](https://discord.gg/qGNqmKts).\n\n### Logout Button\n\nThe /auth SDK exposes logout functionality that logs the user out both locally and invalidates their tokens remotely. Let's build a button to add this functionality.\n\n```tsx\n// file:LogoutButton.tsx\nimport { useSlashAuth } from \"@slashauth/slashauth-react\";\n\nexport const LogoutButton = () => {\n const { logout } = useSlashAuth();\n\n return ;\n};\nTying it all together\nA simple way to see this all work together is updating your app's entry point to display this information.\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\n### Tying it all together\n\nA simple way to see this all work together is updating your app's entry point to display this information.\n\n```tsx\nimport { useSlashAuth } from '@slashauth/slashauth-react';\nimport { LoginStatus } from './LoginStatus';\nimport { LoginButton } from './LoginButton';\nimport { LogoutButton } from './LogoutButton';\n\nfunction App() {\n const { isAuthenticated } = useSlashAuth();\n\n return (\n
\n {isAuthenticated ? : }\n \n
\n );\n}\n\nexport default App;\n```\n\nCongratulations! You've successfully integrated with /auth.\n\nYou can find the full example of this code in our github repo.\n","readmeFilename":"README.md","gitHead":"3182481173b9ffeb9c1e7c61175d28e805e00520","bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"_id":"@slashauth/slashauth-react@2.2.0-beta.0","_nodeVersion":"18.10.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-mrd5pXghuJfspUvtMASrkqKWJmtzGrLPctB20aiqzny//wPpBk91xQYIkiBYZCPJCGKVym3LmllmM61tcTlUmQ==","shasum":"a3ea3b509c491c0ae99e17cc402e6a7b8381742b","tarball":"https://registry.npmjs.org/@slashauth/slashauth-react/-/slashauth-react-2.2.0-beta.0.tgz","fileCount":164,"unpackedSize":790615,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDL+ol2YIqRYA/6CVT4vKzqdTzaK8gfqznBI2g9TE9Q+QIhAM5KQi6PqVIOiO7Nckb2y1hqSf+ilpcNkGMRLSV/L+OU"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAiMAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDRA/+LMJoAMfLTMvMu8VJ2pnFWUpf9WuiubjtJJGV4v7Sdwn6XTIU\r\n4ZRMxyMzqp4NQW9AotEiAJt8jL8F7yd0mb6toN6eSAT3KJbmru56r9YG6Ybf\r\nOyMP4y/xXJuPeMrGfhLISmX7FRajayLaEUu3Hz6Woz4aiJygI+3yQ649qzTE\r\n2XGWymbb0WPJRQqNZkzdgIkjy2w1RCMfQKprLVHLlylm3QEQIYMgpEwNJsFm\r\nCsjIb7UPDmo7OWFUrWxGGdZ0akaHmuyZxkPCM8JFZDW1vZykfPgWU833qb0N\r\nafQHM8RFZDX04NtFrx2n9/tz8eySPRroK0ycq7yryMN07Yu52+lvXhzp+gfm\r\nxr9FXyJX74r59f5R7hm+42qzQPlmBvxeVTkxYWq3ibV3Y2j1YA+1xIvjSBLh\r\nwGNPQDNXJ6KG1Ul1DIHGH6LQUtjg6Ftyl3em+4bJn4bK2wEDHqaxU1La4A48\r\nie8ZPkiReQ/DcbITp0cy1o6o3zW8fepeGw3P+IBkB43YNMMOojZlR1ejK0CW\r\nLRb3WRnOiytzGbRjF/C74hDKn9fPzD5QLvJbpbyfXZ0NP86dXvVj4e19ujs0\r\n90Ybmex07fBS0+4/J/38hc8OavpPh6rNLlLyRca16x17LEr3ieQJEqEzG4Un\r\nL90jsioX4DlgQacd8JyG++efkvOk8sokJzA=\r\n=hUh7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"navvi","email":"ned@slashauth.com"},"directories":{},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slashauth-react_2.2.0-beta.0_1677861632702_0.3875698076798626"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-28T18:59:19.210Z","0.1.23":"2022-04-28T18:59:19.519Z","modified":"2023-03-03T16:40:33.007Z","0.1.24":"2022-04-28T19:19:03.430Z","0.1.25":"2022-04-28T19:20:43.463Z","0.2.1":"2022-05-20T22:29:23.323Z","0.2.2":"2022-05-24T19:00:14.157Z","0.2.3":"2022-06-15T02:31:37.070Z","0.2.4":"2022-06-15T02:35:11.606Z","0.2.7":"2022-06-15T02:51:54.496Z","0.2.12":"2022-06-17T00:40:31.348Z","0.2.27":"2022-06-18T02:08:56.639Z","0.2.30":"2022-06-18T02:09:36.794Z","0.3.0":"2022-06-18T20:29:18.374Z","0.3.3":"2022-06-18T22:19:15.319Z","0.3.4":"2022-06-18T22:27:01.325Z","0.3.5":"2022-06-18T22:45:54.321Z","0.3.6":"2022-06-18T22:49:38.889Z","0.3.7":"2022-06-18T23:37:31.435Z","0.3.8":"2022-06-18T23:40:44.041Z","0.3.9":"2022-06-19T02:59:43.160Z","0.3.10":"2022-06-19T03:09:00.869Z","0.3.11":"2022-06-19T03:12:52.215Z","0.3.12":"2022-06-20T17:49:13.452Z","0.3.13":"2022-06-20T18:23:36.814Z","0.4.0":"2022-06-22T00:03:33.028Z","0.5.0":"2022-07-01T18:08:49.233Z","0.5.1":"2022-07-06T23:06:11.718Z","0.5.2":"2022-07-07T05:11:33.422Z","0.5.3":"2022-07-13T23:49:12.928Z","0.5.4":"2022-07-14T00:28:10.262Z","0.5.5":"2022-07-15T16:46:05.651Z","0.5.6":"2022-07-22T02:51:07.364Z","0.6.3":"2022-08-03T18:15:46.877Z","0.6.6":"2022-08-04T02:41:38.725Z","0.7.0-beta.1":"2022-08-13T01:30:32.257Z","0.7.0-beta.2":"2022-08-14T21:31:49.218Z","0.7.0-beta.3":"2022-08-14T23:45:09.790Z","0.7.0-beta.4":"2022-08-14T23:53:32.179Z","0.7.0-beta.5":"2022-08-15T16:08:40.791Z","0.7.0-beta.6":"2022-08-15T23:05:15.431Z","0.7.0-beta.7":"2022-08-15T23:08:50.013Z","0.7.0-beta.8":"2022-08-15T23:22:53.986Z","0.7.0-beta.10":"2022-08-16T01:39:11.561Z","0.7.0":"2022-08-16T02:26:49.655Z","0.7.1":"2022-08-16T03:18:49.942Z","0.7.2":"2022-08-17T16:22:20.872Z","0.7.3":"2022-08-17T21:49:15.181Z","0.7.4-beta.1":"2022-08-18T19:26:20.085Z","0.7.4":"2022-08-18T22:13:01.091Z","0.8.0-beta.1":"2022-08-31T18:39:58.918Z","0.8.0-beta.2":"2022-08-31T18:55:47.998Z","0.8.0-beta.3":"2022-08-31T22:28:14.657Z","0.8.0-beta.4":"2022-09-01T22:30:44.408Z","0.8.0":"2022-09-01T22:41:57.597Z","0.8.1":"2022-09-01T23:07:21.431Z","0.8.2":"2022-09-07T19:47:20.791Z","0.8.3":"2022-09-14T19:04:03.262Z","0.8.4":"2022-09-14T19:06:36.913Z","0.9.0-beta1":"2022-09-21T22:27:44.196Z","0.9.0-beta2":"2022-09-21T22:42:36.580Z","0.9.0-beta3":"2022-09-22T00:28:17.965Z","0.9.0-beta4":"2022-09-22T17:08:29.326Z","0.9.0-beta5":"2022-09-22T21:08:54.022Z","0.9.0":"2022-09-22T22:09:26.872Z","0.9.1-beta.1":"2022-09-23T04:32:36.887Z","0.9.1-alpha.1":"2022-09-23T16:06:04.929Z","0.9.1-beta.2":"2022-09-23T17:59:47.401Z","0.9.1-beta.3":"2022-09-23T21:41:57.628Z","0.9.1-beta.4":"2022-09-23T21:47:29.603Z","0.9.1":"2022-09-23T22:34:28.423Z","0.9.2-beta.1":"2022-09-28T19:25:51.627Z","0.9.2-beta.2":"2022-10-05T01:33:13.676Z","0.9.3-beta1":"2022-10-05T04:47:57.902Z","0.9.2-beta.3":"2022-10-05T22:43:36.805Z","0.9.3-beta3":"2022-10-06T00:05:48.345Z","0.9.2-beta.4":"2022-10-06T00:15:40.988Z","0.9.3-beta4":"2022-10-06T00:32:07.940Z","0.9.2":"2022-10-06T04:10:11.063Z","0.9.4-beta.1":"2022-10-06T04:50:36.057Z","0.9.4":"2022-10-06T05:01:25.434Z","0.9.5-beta.1":"2022-10-07T01:55:19.093Z","0.9.5-beta.2":"2022-10-07T02:04:55.181Z","0.9.5-beta.3":"2022-10-07T03:03:27.454Z","0.9.5-beta.4":"2022-10-07T03:16:52.587Z","0.9.5-beta.6":"2022-10-07T06:04:30.064Z","0.9.5":"2022-10-07T16:12:43.047Z","0.9.6-alpha.1":"2022-10-07T21:04:05.964Z","0.9.6-alpha.2":"2022-10-07T21:11:14.467Z","0.9.6-alpha.3":"2022-10-07T21:18:32.121Z","0.9.6":"2022-10-07T21:31:04.442Z","0.9.7-beta.1":"2022-10-07T21:36:45.606Z","0.9.7":"2022-10-07T22:26:00.822Z","0.9.8":"2022-10-10T23:19:17.063Z","0.10.0-beta.0":"2022-10-14T17:57:20.049Z","0.10.0":"2022-10-14T18:28:58.393Z","0.11.0-beta.0":"2022-10-25T01:25:36.995Z","0.11.0-beta.1":"2022-10-25T01:31:52.709Z","0.11.0-beta.2":"2022-10-25T01:35:34.686Z","0.11.0-beta.3":"2022-10-25T01:56:44.177Z","0.11.0":"2022-10-25T02:10:27.967Z","0.11.1-beta.0":"2022-11-05T00:57:00.726Z","0.11.1-beta.1":"2022-11-05T01:21:50.912Z","0.11.1":"2022-11-07T19:31:40.367Z","0.11.2-beta.1":"2022-11-09T04:41:38.383Z","0.11.2-beta.2":"2022-11-10T00:27:45.244Z","0.11.3":"2022-11-10T00:36:11.437Z","0.12.0-beta.0":"2022-12-12T23:38:34.450Z","0.12.0-beta.1":"2022-12-12T23:47:37.054Z","0.12.0-beta.2":"2022-12-12T23:59:54.292Z","0.12.0-beta.3":"2022-12-14T00:04:37.156Z","0.12.0-beta.4":"2022-12-14T18:59:01.647Z","0.12.0":"2022-12-14T19:35:33.935Z","0.13.0-beta.0":"2022-12-20T21:24:15.778Z","0.13.0":"2022-12-20T22:03:21.822Z","0.13.1-beta.0":"2022-12-23T00:04:12.660Z","0.13.1":"2022-12-23T01:14:37.465Z","0.13.2-beta.0":"2023-01-06T07:13:14.846Z","0.13.2":"2023-01-06T07:25:12.325Z","0.14.0-beta.0":"2023-01-09T22:44:36.315Z","0.14.0":"2023-01-09T22:49:40.961Z","1.0.0-beta.0":"2023-01-10T04:10:11.486Z","1.0.0-beta.1":"2023-01-10T21:23:38.791Z","1.0.0-beta.2":"2023-01-11T18:42:48.025Z","1.0.0-beta.3":"2023-01-12T00:38:58.742Z","1.0.0-beta.4":"2023-01-12T21:32:12.275Z","1.0.0-beta.5":"2023-01-12T21:40:54.413Z","1.0.0-beta.6":"2023-01-12T21:46:24.398Z","1.0.0-beta.7":"2023-01-12T21:51:29.105Z","1.0.0-beta.8":"2023-01-12T22:05:54.082Z","1.0.0-beta.9":"2023-01-13T00:08:05.717Z","1.0.0-alpha.0":"2023-01-17T21:39:55.290Z","1.0.0-alpha.1":"2023-01-18T15:15:10.892Z","1.0.0-beta.10":"2023-01-18T20:39:02.998Z","1.0.0-alpha.2":"2023-01-19T20:04:07.076Z","1.0.0-alpha.3":"2023-01-19T22:49:00.965Z","1.0.0-alpha.4":"2023-01-19T23:23:32.634Z","1.0.0":"2023-01-20T15:40:59.651Z","1.0.1":"2023-01-20T18:44:30.293Z","1.1.0":"2023-01-20T19:22:07.754Z","1.1.1-gamma.1":"2023-02-02T00:22:14.174Z","1.1.1-gamma.2":"2023-02-02T01:41:01.860Z","1.2.0":"2023-02-02T04:54:18.908Z","1.2.0-gamma.1":"2023-02-04T00:15:54.087Z","1.3.0":"2023-02-04T00:26:24.998Z","1.4.0-beta.0":"2023-02-05T17:18:54.595Z","1.4.0-beta.1":"2023-02-06T14:56:42.700Z","1.4.0":"2023-02-06T15:17:48.556Z","1.5.0-beta.0":"2023-02-07T22:22:53.552Z","1.5.0":"2023-02-07T23:04:36.446Z","1.5.1-beta.0":"2023-02-08T18:57:39.686Z","1.5.1":"2023-02-08T19:10:36.435Z","1.5.2-beta.0":"2023-02-08T19:29:53.463Z","1.5.2":"2023-02-08T19:31:31.887Z","1.6.0-alpha.0":"2023-02-10T21:45:51.642Z","1.6.0-alpha.1":"2023-02-10T22:09:07.790Z","1.6.0-alpha.2":"2023-02-10T22:12:34.959Z","1.6.0-beta.0":"2023-02-14T00:09:16.210Z","1.6.0-beta.1":"2023-02-14T00:11:48.993Z","2.0.0":"2023-02-14T19:44:17.807Z","2.1.0":"2023-02-17T23:11:59.710Z","2.1.1-beta.0":"2023-02-23T16:50:22.958Z","2.1.1":"2023-02-23T20:15:00.951Z","2.1.2-beta.0":"2023-02-24T22:22:38.509Z","2.1.2-beta.1":"2023-02-24T23:03:42.471Z","2.1.2":"2023-02-27T16:09:53.106Z","2.2.0-alpha.0":"2023-03-02T05:27:15.726Z","2.2.0-alpha.1":"2023-03-02T20:16:43.806Z","2.2.0":"2023-03-03T16:39:12.461Z","2.2.0-beta.0":"2023-03-03T16:40:32.869Z"},"maintainers":[{"name":"navvi","email":"ned@slashauth.com"}],"description":"Slashauth library for react apps powered by @slashauth","homepage":"https://www.slashauth.xyz","repository":{"type":"git","url":"git+https://github.com/slashauth/slashauth-react.git"},"bugs":{"url":"https://github.com/slashauth/slashauth-react/issues"},"license":"MIT","readme":"","readmeFilename":""}