1:HL["/_next/static/css/3db6122cc27c8de8.css",{"as":"style"}] 0:["TueFr3DgBqMH5pUDMQIwB",[[["",{"children":["sdk-react",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],"$L2",[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/3db6122cc27c8de8.css","precedence":"next"}]],"$L3"]]]] 2:[null,"$L4",null] 3:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"SDK Frontend - Block-Auth API Reference"}],["$","meta","2",{"name":"description","content":"This guide will get you all set up and ready to use the Block-Auth SDK. We’ll cover how to get started an SDK client and how to make your first SDK request."}],["$","meta","3",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","link","4",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"256x256"}]] 5:I{"id":1431,"chunks":["685:static/chunks/685-00eaf189776e499f.js","411:static/chunks/411-9586d5d3621ed092.js","21:static/chunks/21-7cecc0b8d96c28b4.js","361:static/chunks/361-306de3187f051a9b.js","379:static/chunks/379-8c339dbec83324f1.js","39:static/chunks/39-5ee607123f978930.js","185:static/chunks/app/layout-029d30f4466dc98a.js"],"name":"Providers","async":false} 6:I{"id":6848,"chunks":["685:static/chunks/685-00eaf189776e499f.js","411:static/chunks/411-9586d5d3621ed092.js","21:static/chunks/21-7cecc0b8d96c28b4.js","361:static/chunks/361-306de3187f051a9b.js","379:static/chunks/379-8c339dbec83324f1.js","39:static/chunks/39-5ee607123f978930.js","185:static/chunks/app/layout-029d30f4466dc98a.js"],"name":"Layout","async":false} 7:I{"id":7767,"chunks":["272:static/chunks/webpack-485b50192fb0a198.js","971:static/chunks/fd9d1056-0462299d818c8abc.js","596:static/chunks/596-0ef5ecc2d8dbbafa.js"],"name":"default","async":false} 8:I{"id":7920,"chunks":["272:static/chunks/webpack-485b50192fb0a198.js","971:static/chunks/fd9d1056-0462299d818c8abc.js","596:static/chunks/596-0ef5ecc2d8dbbafa.js"],"name":"default","async":false} 9:I{"id":6685,"chunks":["685:static/chunks/685-00eaf189776e499f.js","411:static/chunks/411-9586d5d3621ed092.js","39:static/chunks/39-5ee607123f978930.js","337:static/chunks/app/sdk-react/page-65ac0494e02da10c.js"],"name":"","async":false} b:I{"id":3971,"chunks":["685:static/chunks/685-00eaf189776e499f.js","411:static/chunks/411-9586d5d3621ed092.js","39:static/chunks/39-5ee607123f978930.js","337:static/chunks/app/sdk-react/page-65ac0494e02da10c.js"],"name":"Heading","async":false} c:I{"id":2140,"chunks":["685:static/chunks/685-00eaf189776e499f.js","411:static/chunks/411-9586d5d3621ed092.js","39:static/chunks/39-5ee607123f978930.js","337:static/chunks/app/sdk-react/page-65ac0494e02da10c.js"],"name":"CodeGroup","async":false} d:I{"id":2140,"chunks":["685:static/chunks/685-00eaf189776e499f.js","411:static/chunks/411-9586d5d3621ed092.js","39:static/chunks/39-5ee607123f978930.js","337:static/chunks/app/sdk-react/page-65ac0494e02da10c.js"],"name":"Pre","async":false} e:I{"id":2140,"chunks":["685:static/chunks/685-00eaf189776e499f.js","411:static/chunks/411-9586d5d3621ed092.js","39:static/chunks/39-5ee607123f978930.js","337:static/chunks/app/sdk-react/page-65ac0494e02da10c.js"],"name":"Code","async":false} f:I{"id":3222,"chunks":["685:static/chunks/685-00eaf189776e499f.js","411:static/chunks/411-9586d5d3621ed092.js","39:static/chunks/39-5ee607123f978930.js","337:static/chunks/app/sdk-react/page-65ac0494e02da10c.js"],"name":"Image","async":false} 12:I{"id":1686,"chunks":["685:static/chunks/685-00eaf189776e499f.js","411:static/chunks/411-9586d5d3621ed092.js","39:static/chunks/39-5ee607123f978930.js","337:static/chunks/app/sdk-react/page-65ac0494e02da10c.js"],"name":"Feedback","async":false} 10:T6b9,import { // components BtnSignin, BtnGmail, BtnMetamask, BtnMicrosoft, BtnPhantom, ContentSignin, ContentSignup, DropdownProfile, FlowBlockAuth, // helpers accountShort, cleanUrl, getIp, isValidImgUrl, secsToText, // stores useStoreGoogle, useStoreMetamask, useStoreMicrosoft, useStorePhantom, useStoreModals, useStoreUI, useStoreWS, } from 'blockauth-sdk-react' import React, { useState } from 'react' // use your own config const config = { api_key: 'your_api_key', api_secret: 'your_api_secret', } // external file for your backend api calls async function myBackendIsLogguedCall({ address }) { const apiUrl = 'https://my-backend.com/api/' // my backend api call must generate a token for the user const r = await axios.post(`${apiUrl}auth/signin`, { address }) if (r.data.error) return false localStorage.setItem('auth', JSON.stringify(r.data)) return true } export default function App(){ const [isLogged, setIsLogged] = useState( localStorage.getItem('auth')?.token ? true : false ) const onLogout = () => { localStorage.removeItem('auth') setIsLogged(false) window.location.reload() } const onSuccess = (address) => { console.log('[front] query api for isSigned: ', address) const isLogged = await myBackendIsLogguedCall(address) window.location.reload() } return (<> {(isLogged) && <> } {(!isLogged) && <> } ) } 11:T490f,import { // components BtnSignin, BtnGmail, BtnMetamask, BtnMicrosoft, BtnPhantom, ContentSignin, ContentSignup, DropdownProfile, FlowBlockAuth, // helpers accountShort, cleanUrl, getIp, isValidImgUrl, secsToText, // stores useStoreGoogle, useStoreMetamask, useStoreMicrosoft, useStorePhantom, useStoreModals, useStoreUI, useStoreWS, } from 'blockauth-sdk-react' import React, { useState } from 'react' // use your own config const config = { api_key: 'your_api_key', api_secret: 'your_api_secret', } // external file for your backend api calls async function myBackendIsLogguedCall({ address }) { const apiUrl = 'https://my-backend.com/api/' // my backend api call must generate a token for the user const r = await axios.post(`${apiUrl}auth/signin`, { address }) if (r.data.error) return false localStorage.setItem('auth', JSON.stringify(r.data)) return true } export default function App(){ const [isLogged, setIsLogged] = useState( localStorage.getItem('auth')?.token ? true : false ) const onLogout = () => { localStorage.removeItem('auth') setIsLogged(false) window.location.reload() } const onSuccess = (address) => { console.log('[front] query api for isSigned: ', address) const isLogged = await myBackendIsLogguedCall(address) window.location.reload() } return (<> {(isLogged) && <> <DropdownProfile onLogout={onLogout} apiKey={config.api_key} apiSecret={config.api_secret} /> </>} {(!isLogged) && <> <FlowBlockAuth apiKey={config.api_key} apiSecret={config.api_secret} onSuccess={onSuccess} /> </>} </>) } 4:["$","html",null,{"lang":"en","className":"h-full","suppressHydrationWarning":true,"children":["$","body",null,{"className":"flex min-h-full bg-white antialiased dark:bg-blue-900","children":["$","$L5",null,{"children":["$","div",null,{"className":"w-full","children":["$","$L6",null,{"allSections":{"/":[{"title":"API Rest","id":"resources"},{"title":"SDKs","id":"resources"},{"title":"Browser Extension","id":"resources"},{"title":"Dashboard","id":"resources"}],"/api":[{"title":"Sending events from website to extension","id":"sending-events-from-website-to-extension"}],"/api-app":[{"title":"The app configuration model","id":"the-app-configuration-model"},{"title":"Get app configuration","id":"get-app-configuration","tag":"GET","label":"/api/app"}],"/api-auth":[{"title":"Basic authentication","id":"basic-authentication"},{"title":"Refresh token","id":"refresh-token"},{"title":"OAuth2 with bearer token","id":"o-auth2-with-bearer-token"},{"title":"Using an SDK","id":"using-an-sdk"}],"/api-intro":[{"title":"Guides","id":"guides"},{"title":"Resources","id":"resources"}],"/api-logs":[{"title":"The logs model","id":"the-logs-model"},{"title":"Get a list of logs","id":"get-a-list-of-logs","tag":"GET","label":"/api/logs"}],"/api-roles":[{"title":"The role model","id":"the-role-model"},{"title":"Get a list of roles","id":"get-a-list-of-roles","tag":"GET","label":"/api/roles"}],"/api-users":[{"title":"The user model","id":"the-user-model"},{"title":"Get a list of users","id":"get-a-list-of-users","tag":"GET","label":"/api/users"}],"/dashboard-guides":[{"title":"View: Applications","id":"view-applications"},{"title":"View: Users management","id":"view-users-management"},{"title":"View: Monitoring","id":"view-monitoring"},{"title":"View: Tenant management","id":"view-tenant-management"},{"title":"View: Modules","id":"view-modules"}],"/dashboard-intro":[{"title":"Guides","id":"guides"},{"title":"Resources","id":"resources"}],"/errors":[{"title":"Status codes","id":"status-codes"},{"title":"Error types","id":"error-types"}],"/extension-api":[{"title":"Sending events from website to extension","id":"sending-events-from-website-to-extension"}],"/extension-introduction":[{"title":"Getting started","id":"getting-started","anchor":false}],"/extension-quickstart":[{"title":"How to create an account","id":"how-to-create-an-account"},{"title":"How to sign in","id":"how-to-sign-in"},{"title":"How to link an account","id":"how-to-link-an-account"},{"title":"How to use OTP","id":"how-to-use-otp"}],"/pagination":[{"title":"Example using cursors","id":"example-using-cursors"}],"/sdk-app":[{"title":"The app model","id":"the-app-model"},{"title":"Get an App","id":"get-an-app","tag":"event","label":"sdk:app"}],"/sdk-auth":[{"title":"Choose your client","id":"choose-your-client"},{"title":"Connecting using credentials","id":"connecting-using-credentials"},{"title":"Verify USER is logged in or not into APP","id":"verify-user-is-logged-in-or-not-into-app"},{"title":"What's next?","id":"whats-next"}],"/sdk-intro":[{"title":"Official libraries","id":"official-libraries"}],"/sdk-logs":[{"title":"The app model","id":"the-app-model"},{"title":"Get an App","id":"get-an-app","tag":"event","label":"sdk:app"}],"/sdk-permissions":[{"title":"The app model","id":"the-app-model"},{"title":"Get an App","id":"get-an-app","tag":"event","label":"sdk:app"}],"/sdk-react":[{"title":"Choose your client","id":"choose-your-client"},{"title":"Connecting using credentials","id":"connecting-using-credentials"},{"title":"What's next?","id":"whats-next"}],"/sdk-roles":[{"title":"The rol model","id":"the-rol-model"},{"title":"Get an App","id":"get-an-app","tag":"event","label":"sdk:app"}],"/sdk-users":[{"title":"The app model","id":"the-app-model"},{"title":"Get an App","id":"get-an-app","tag":"event","label":"sdk:app"}],"/webhooks":[{"title":"Registering webhooks","id":"registering-webhooks"},{"title":"Consuming webhooks","id":"consuming-webhooks"},{"title":"Event types","id":"event-types"},{"title":"Security","id":"security"}]},"children":["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":[["$","div",null,{"className":"absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden","children":["$","div",null,{"className":"absolute left-1/2 top-0 ml-[-38rem] h-[25rem] w-[81.25rem] dark:[mask-image:linear-gradient(white,transparent)]","children":[["$","div",null,{"className":"absolute inset-0 bg-gradient-to-r from-[#36b49f] to-[#DBFF75] opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#36b49f]/30 dark:to-[#DBFF75]/30 dark:opacity-100","children":["$","svg",null,{"aria-hidden":"true","className":"absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay dark:fill-white/2.5 dark:stroke-white/5","children":[["$","defs",null,{"children":["$","pattern",null,{"id":":S1:","width":72,"height":56,"patternUnits":"userSpaceOnUse","x":-12,"y":4,"children":["$","path",null,{"d":"M.5 56V.5H72","fill":"none"}]}]}],["$","rect",null,{"width":"100%","height":"100%","strokeWidth":0,"fill":"url(#:S1:)"}],["$","svg",null,{"x":-12,"y":4,"className":"overflow-visible","children":[["$","rect","4-3",{"strokeWidth":"0","width":73,"height":57,"x":288,"y":168}],["$","rect","2-1",{"strokeWidth":"0","width":73,"height":57,"x":144,"y":56}],["$","rect","7-3",{"strokeWidth":"0","width":73,"height":57,"x":504,"y":168}],["$","rect","10-6",{"strokeWidth":"0","width":73,"height":57,"x":720,"y":336}]]}]]}]}],["$","svg",null,{"viewBox":"0 0 1113 440","aria-hidden":"true","className":"absolute left-1/2 top-0 ml-[-19rem] w-[69.5625rem] fill-white blur-[26px] dark:hidden","children":["$","path",null,{"d":"M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z"}]}]]}]}],["$","div",null,{"className":"mx-auto flex h-full max-w-xl flex-col items-center justify-center py-16 text-center","children":[["$","p",null,{"className":"text-sm font-semibold text-gray-900 dark:text-white","children":"404"}],["$","h1",null,{"className":"mt-2 text-2xl font-bold text-gray-900 dark:text-white","children":"Page not found"}],["$","p",null,{"className":"mt-2 text-base text-gray-600 dark:text-gray-400","children":"Sorry, we couldn’t find the page you’re looking for."}],["$","$L9",null,{"className":"inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition rounded-full bg-blue-900 py-1 px-3 text-white hover:bg-blue-700 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-1 dark:ring-inset dark:ring-emerald-400/20 dark:hover:bg-emerald-400/10 dark:hover:text-emerald-300 dark:hover:ring-emerald-300 mt-8","href":"/","children":[false,"Back to docs",["$","svg",null,{"viewBox":"0 0 20 20","fill":"none","aria-hidden":"true","className":"mt-0.5 h-5 w-5 -mr-1","children":["$","path",null,{"stroke":"currentColor","strokeLinecap":"round","strokeLinejoin":"round","d":"m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"}]}]]}]]}]],"notFoundStyles":[],"childProp":{"current":["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children","sdk-react","children"],"error":"$undefined","errorStyles":"$undefined","loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$La",["$","article",null,{"className":"flex h-full flex-col pb-10 pt-16","children":[["$","div",null,{"className":"flex-auto prose dark:prose-invert [html_:where(&>*)]:mx-auto [html_:where(&>*)]:max-w-2xl [html_:where(&>*)]:lg:mx-[calc(50%-min(50%,theme(maxWidth.lg)))] [html_:where(&>*)]:lg:max-w-3xl","children":[["$","h1",null,{"children":"Authentication with the Block-Auth SDK"}],"\n",["$","p",null,{"children":"This guide will get you all set up and ready to use the Block-Auth SDK. We'll cover how to get started using one of our SDK clients and how to make your first SDK request. We'll also look at where to go next to find all the information you need to take full advantage of our powerful REST SDK.","className":"lead"}],"\n",["$","div",null,{"className":"my-6 flex gap-2.5 rounded-2xl border border-emerald-500/20 bg-emerald-50/50 p-4 leading-6 text-emerald-900 dark:border-emerald-500/30 dark:bg-emerald-500/5 dark:text-emerald-200 dark:[--tw-prose-links-hover:theme(colors.emerald.300)] dark:[--tw-prose-links:theme(colors.white)]","children":[["$","svg",null,{"viewBox":"0 0 16 16","aria-hidden":"true","className":"mt-1 h-4 w-4 flex-none fill-emerald-500 stroke-white dark:fill-emerald-200/20 dark:stroke-emerald-200","children":[["$","circle",null,{"cx":"8","cy":"8","r":"8","strokeWidth":"0"}],["$","path",null,{"fill":"none","strokeLinecap":"round","strokeLinejoin":"round","strokeWidth":"1.5","d":"M6.75 7.75h1.5v3.5"}],["$","circle",null,{"cx":"8","cy":"4","r":".5","fill":"none"}]]}],["$","div",null,{"className":"[&>:first-child]:mt-0 [&>:last-child]:mb-0","children":["$","p",null,{"children":["Before you can make requests to the Block-Auth SDK, you will need to grab your\nSDK keys from your dashboard. You find it under ",["$","$L9",null,{"href":"https://dashboard.block-auth.io/panel/apps/","children":"Applications » Settings"}],"."]}]}]]}],"\n",["$","$Lb",null,{"level":2,"id":"choose-your-client","children":"Choose your client"}],"\n",["$","p",null,{"children":"Before making your first request, you need to pick which SDK client you will use. Block-Auth offers clients for JavaScript. In the following example, you can see how to install client."}],"\n",["$","$Lc",null,{"children":["$","$Ld",null,{"language":"js","code":"# Install the Protocol JavaScript SDK\nnpm install blockauth-sdk-react --save\n","children":["$","$Le",null,{"className":"language-bash","children":"# Install the Protocol JavaScript SDK\nnpm install blockauth-sdk-react --save\n"}]}]}],"\n",["$","div",null,{"className":"not-prose","children":["$","$L9",null,{"className":"inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition text-emerald-500 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-500","href":"/sdk-intro","children":[false,"Check out our list of first-party SDKs",["$","svg",null,{"viewBox":"0 0 20 20","fill":"none","aria-hidden":"true","className":"mt-0.5 h-5 w-5 relative top-px -mr-1","children":["$","path",null,{"stroke":"currentColor","strokeLinecap":"round","strokeLinejoin":"round","d":"m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"}]}]]}]}],"\n",["$","$Lb",null,{"level":2,"id":"connecting-using-credentials","children":"Connecting using credentials"}],"\n",["$","p",null,{"children":["After picking your preferred client, you are ready to make your first call to the Protocol SDK. Below is an example of how to connect your users with the BlockAuth SDK using React.\nWe will focus the example over 2 main components ",["$","$Le",null,{"children":"FlowBlockAuth"}]," and ",["$","$Le",null,{"children":"DropdownProfile"}]," that will help you to connect your users with the BlockAuth SDK."]}],"\n",["$","div",null,{"className":"grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2 w-full","children":["$","div",null,{"className":"[&>:first-child]:mt-0 [&>:last-child]:mb-0","children":[["$","h3",null,{"children":" User actions 1/3: Click on button"}],["$","p",null,{"children":["Component which starts the sign in/sign up flows ",["$","$Le",null,{"children":""}]]}],["$","$Lf",null,{"className":"border border-gray-200 dark:border-gray-700 rounded-md flex items-center justify-center mx-auto","src":"/_next/static/media/sdk_react_flowblockauth_step1.14adeb04.png","alt":"$undefined","height":100,"width":200}]]}]}],"\n",["$","div",null,{"className":"grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2 w-full","children":["$","div",null,{"className":"[&>:first-child]:mt-0 [&>:last-child]:mb-0","children":[["$","h3",null,{"children":" User actions 2/3: Connect with a service"}],["$","div",null,{"className":"grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2 w-full","children":[["$","div",null,{"className":"[&>:first-child]:mt-0 [&>:last-child]:mb-0","children":["$","$Lf",null,{"className":"border border-gray-200 dark:border-gray-700 rounded-md flex items-center justify-center mx-auto","src":"/_next/static/media/sdk_react_flowblockauth_step2.9ac3afba.png","alt":"$undefined","height":200,"width":400}]}],["$","div",null,{"className":"[&>:first-child]:mt-0 [&>:last-child]:mb-0","children":["$","$Lf",null,{"className":"border border-gray-200 dark:border-gray-700 rounded-md flex items-center justify-center mx-auto","src":"/_next/static/media/sdk_react_flowblockauth_step3.bd76b771.png","alt":"$undefined","height":200,"width":400}]}]]}]]}]}],"\n",["$","div",null,{"className":"grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2 w-full","children":["$","div",null,{"className":"[&>:first-child]:mt-0 [&>:last-child]:mb-0","children":[["$","h3",null,{"children":" User actions 3/3: Authorize Log In"}],["$","p",null,{"children":["Component which shows the user profile and allows to log out ",["$","$Le",null,{"children":""}]]}],["$","$Lf",null,{"className":"border border-gray-200 dark:border-gray-700 rounded-md flex items-center justify-center mx-auto","src":"/_next/static/media/sdk_react_flowblockauth_step4.dcc2a678.png","alt":"$undefined","height":400,"width":800}]]}]}],"\n",["$","$Lc",null,{"tag":"SDK-react","label":"connection","children":["$","$Ld",null,{"language":"js","code":"$10","children":["$","$Le",null,{"className":"language-js","children":"$11"}]}]}],"\n",["$","div",null,{"className":"not-prose","children":["$","$L9",null,{"className":"inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition text-emerald-500 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-500","href":"/api-auth/#basic-authentication","children":[false,"Read the docs for the Authentication events",["$","svg",null,{"viewBox":"0 0 20 20","fill":"none","aria-hidden":"true","className":"mt-0.5 h-5 w-5 relative top-px -mr-1","children":["$","path",null,{"stroke":"currentColor","strokeLinecap":"round","strokeLinejoin":"round","d":"m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"}]}]]}]}],"\n",["$","$Lb",null,{"level":2,"id":"whats-next","children":"What's next?"}],"\n",["$","p",null,{"children":"Great, you're now set up with an SDK client and have made your first request to the SDK. Here are a few links that might be handy as you venture further into the Protocol SDK:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["$","$L9",null,{"href":"https://dashboard.block-auth.io/panel/apps/","children":"Grab your SDK keys from the Protocol dashboard"}]}],"\n",["$","li",null,{"children":["$","$L9",null,{"href":"/authentication","children":"Check out the Authentications events"}]}],"\n",["$","li",null,{"children":["$","$L9",null,{"href":"/errors","children":"Learn about the different error messages in Protocol"}]}],"\n"]}]]}],["$","footer",null,{"className":"mx-auto mt-16 w-full max-w-2xl lg:max-w-5xl","children":["$","$L12",null,{}]}]]}],null],"segment":"__PAGE__"},"styles":[]}],"segment":"sdk-react"},"styles":[]}]}]}]}]}]}] a:null