1"use strict";(globalThis.webpackChunkauthorizer_docs=globalThis.webpackChunkauthorizer_docs||[]).push([[282],{6470(e,n,r){r.r(n),r.d(n,{assets:()=>l,contentTitle:()=>d,default:()=>h,frontMatter:()=>t,metadata:()=>s,toc:()=>a});const s=JSON.parse('{"id":"sdks/authorizer-react/components","title":"Components","description":"@authorizerdev/authorizer-react exports the few components that you can use in your react application. This will help you build authentication and authorization faster for your application.","source":"@site/docs/sdks/authorizer-react/components.md","sourceDirName":"sdks/authorizer-react","slug":"/sdks/authorizer-react/components","permalink":"/sdks/authorizer-react/components","draft":false,"unlisted":false,"editUrl":"https://github.com/authorizerdev/authorizer-docs/tree/main/docs/sdks/authorizer-react/components.md","tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"sidebar_position":2,"title":"Components"},"sidebar":"sdksSidebar","previous":{"title":"Getting Started","permalink":"/sdks/authorizer-react/"},"next":{"title":"Hooks","permalink":"/sdks/authorizer-react/hooks"}}');var i=r(4848),o=r(8453);const t={sidebar_position:2,title:"Components"},d="Components",l={},a=[{value:"Table of contents",id:"table-of-contents",level:2},{value:"<code>AuthorizerProvider</code>",id:"authorizerprovider",level:2},{value:"Props",id:"props",level:3},{value:"Sample Usage",id:"sample-usage",level:3},{value:"<code>Authorizer</code>
1",id:"authorizer",level:2},{value:"Props",id:"props-1",level:3},{value:"Sample Usage",id:"sample-usage-1",level:3},{value:"<code>AuthorizerSignup</code>",id:"authorizersignup",level:2},{value:"Props",id:"props-2",level:3},{value:"Sample Usage",id:"sample-usage-2",level:3},{value:"<code>AuthorizerBasicAuthLogin</code>",id:"authorizerbasicauthlogin",level:2},{value:"Props",id:"props-3",level:3},{value:"Sample Usage",id:"sample-usage-3",level:3},{value:"<code>AuthorizerMagicLinkLogin</code>",id:"authorizermagiclinklogin",level:2},{value:"Props",id:"props-4",level:3},{value:"Sample Usage",id:"sample-usage-4",level:3},{value:"<code>AuthorizerSocialLogin</code>",id:"authorizersociallogin",level:2},{value:"Props",id:"props-5",level:3},{value:"Sample Usage",id:"sample-usage-5",level:3},{value:"<code>AuthorizerPasskeyLogin</code>",id:"authorizerpasskeylogin",level:2},{value:"Props",id:"props-6",level:3},{value:"Sample Usage",id:"sample-usage-6",level:3},{value:"<code>AuthorizerForgotPassword</code>",id:"authorizerforgotpassword",level:2},{value:"Props",id:"props-7",level:3},{value:"Sample Usage",id:"sample-usage-7",level:3},{value:"<code>AuthorizerResetPassword</code>",id:"authorizerresetpassword",level:2},{value:"Props",id:"props-8",level:3},{value:"Sample Usage",id:"sample-usage-8",level:3},{value:"<code>AuthorizerVerifyOtp</code>",id:"authorizerverifyotp",level:2},{value:"Props",id:"props-9",level:3},{value:"Sample Usage",id:"sample-usage-9",level:3},{value:"<code>AuthorizerTOTPScanner</code>",id:"authorizertotpscanner",level:2},{value:"Props",id:"props-10",level:3},{value:"Sample Usage",id:"sample-usage-10",level:3},{value:"<code>AuthorizerMFASetup</code>",id:"authorizermfasetup",level:2},{value:"Props",id:"props-11",level:3},{value:"Sample Usage",id:"sample-usage-11",level:3},{value:"<code>AuthorizerPasskeyRegister</code>
1",id:"authorizerpasskeyregister",level:2},{value:"Props",id:"props-12",level:3},{value:"Sample Usage",id:"sample-usage-12",level:3}];function c(e){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"components",children:"Components"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"@authorizerdev/authorizer-react"})," exports the few components that you can use in your react application. This will help you build authentication and authorization faster for your application."]}),"\n",(0,i.jsx)(n.h2,{id:"table-of-contents",children:"Table of contents"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#authorizerprovider",children:(0,i.jsx)(n.code,{children:"AuthorizerProvider"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#authorizer",children:(0,i.jsx)(n.code,{children:"Authorizer"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#authorizersignup",children:(0,i.jsx)(n.code,{children:"AuthorizerSignup"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#authorizerbasicauthlogin",children:(0,i.jsx)(n.code,{children:"AuthorizerBasicAuthLogin"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#authorizermagiclinklogin",children:(0,i.jsx)(n.code,{children:"AuthorizerMagicLinkLogin"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#authorizersociallogin",children:(0,i.jsx)(n.code,{children:"AuthorizerSocialLogin"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#authorizerpasskeylogin",children:(0,i.jsx)(n.code,{children:"AuthorizerPasskeyLogin"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#authorizerforgotpassword",children:(0,i.jsx)(n.code,{children:"AuthorizerForgotPassword"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#authorizerresetpassword",children:(0,i.jsx)(n.code,{children:"AuthorizerResetPassword"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#authorizerverifyotp",children:(0,i.jsx)(n.code,{children:"AuthorizerVerifyOtp"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#authorizertotpscanner",children:(0,i.jsx)(n.code,{children:"AuthorizerTOTPScanner"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#authorizermfasetup",children:(0,i.jsx)(n.code,{children:"AuthorizerMFASetup"})})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"#authorizerpasskeyregister",children:(0,i.jsx)(n.code,{children:"AuthorizerPasskeyRegister"})})}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"authorizerprovider",children:(0,i.jsx)(n.code,{children:"AuthorizerProvider"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"AuthorizerProvider"})," is the container component that wraps all the Authorizer components. It binds the backend configuration in the app and renders various views accordingly."]}),"\n",(0,i.jsx)(n.h3,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"config"}),": Object to configure the ",(0,i.jsx)(n.code,{children:"authorizer"})," backend URL and redirect URL. It accepts JSON object with following keys"]}),"\n"]}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Key"}),(0,i.jsx)(n.th,{children:"Type"}),(0,i.jsx)(n.th,{children:"Description"}),(0,i.jsx)(n.th,{children:"Required"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"authorizerURL"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"string"})}),(0,i.jsx)(n.td,{children:"Authorizer backend URL"}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"true"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"redirectURL"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"string"})}),(0,i.jsxs)(n.td,{children:["Frontend application URL or the page where you want to redirect user post login. Default value is ",(0,i.jsx)(n.code,{children:"window.location.origin"})]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"true"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"clientID"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"string"})}),(0,i.jsxs)(n.td,{children:["Your client identifier (the value of ",(0,i.jsx)(n.code,{children:"--client-id"})," flag used when starting the server)"]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"false"})})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"protocol"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"'graphql' | 'rest'"})}),(0,i.jsxs)(n.td,{children:["Wire transport for API calls. Default is ",(0,i.jsx)(n.code,{children:"'graphql'"}),". Use ",(0,i.jsx)(n.code,{children:"'rest'"})," to route calls through the typed REST endpoints instead."]}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"false"})})]})]})]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Note:"})," ",(0,i.jsx)(n.code,{children:"'grpc'"})," is not supported in ",(0,i.jsx)(n.code,{children:"authorizer-react"}
1)," because browsers cannot speak raw gRPC. Use ",(0,i.jsx)(n.code,{children:"'graphql'"})," (default) or ",(0,i.jsx)(n.code,{children:"'rest'"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"AuthorizerProvider"})," also accepts one prop alongside ",(0,i.jsx)(n.code,{children:"config"})," (not nested inside it):"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onStateChangeCallback={async (newState) => {}}"}),": Async callback fired whenever the context state (",(0,i.jsx)(n.code,{children:"user"}),", ",(0,i.jsx)(n.code,{children:"token"}),", ",(0,i.jsx)(n.code,{children:"loading"}),", ",(0,i.jsx)(n.code,{children:"config"}),") changes."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"sample-usage",children:"Sample Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import { AuthorizerProvider } from '@authorizerdev/authorizer-react'\n\nconst App = () => {\n return (\n <AuthorizerProvider\n config={{\n authorizerURL: 'http://localhost:8080',\n redirectURL: window.location.origin,\n clientID: 'YOUR_CLIENT_ID',\n protocol: 'graphql', // or 'rest'\n }}\n onStateChangeCallback={async (newState) => {}}\n >\n {/* rest of your components */}\n </AuthorizerProvider>\n )\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"authorizer",children:(0,i.jsx)(n.code,{children:"Authorizer"})}),"\n",(0,i.jsx)(n.p,{children:"A core component that includes:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"social logins (incl. Discord, when enabled on the backend)"}),"\n",(0,i.jsxs)(n.li,{children:['passkey ("Sign in with a passkey") login, shown automatically when the browser supports ',(0,i.jsx)(n.a,{href:"https://www.w3.org/TR/webauthn-2/",children:"WebAuthn"})]}),"\n",(0,i.jsx)(n.li,{children:"signup view"}),"\n",(0,i.jsx)(n.li,{children:"login view"}),"\n",(0,i.jsx)(n.li,{children:"forgot password view"}),"\n",(0,i.jsx)(n.li,{children:"multi-factor authentication setup, verification, and locked-account screens, driven by the backend's response to login/signup/passkey requests"}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Pre configured component that shows various login/signup options based on the backend configurations. Make sure it is used as Child of ",(0,i.jsx)(n.code,{children:"AuthorizerProvider"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"props-1",children:"Props"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onLogin={(loginResponse)=>{}}"}),": event called when login form is submitted successfully."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onSignup={(signupResponse)=>{}}"}),": event called when signup form is submitted successfully."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onMagicLinkLogin={(magicLinkResponse)=>{}}"}),": event called when magic link login form is submitted successfully."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onForgotPassword={(forgotPasswordResponse)=>{}}"}),": called when forgot password form is submitted successfully."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onPasswordReset={()=>{}}"}),": called after a password reset completes from the forgot-password OTP flow."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onCancelMfa={()=>{}}"}),': optional. When provided, a "Back" link is shown on the MFA setup/verify screens (rendered when the URL carries MFA-redirect params, e.g. after an OAuth or magic-link continuation) so the host can send the user elsewhere, such as back to the login URL with the MFA params cleared.']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"roles={string[]}"}),": optional. Restricts which roles a login/signup grants, e.g. ",(0,i.jsx)(n.code,{children:"roles={['user']}"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"signupFieldsOverrides={FormFieldsOverrides}"}),": optional. Lets you relabel, reword the placeholder of, hide, or make optional the ",(0,i.jsx)(n.code,{children:"given_name"}),", ",(0,i.jsx)(n.code,{children:"family_name"}),", ",(0,i.jsx)(n.code,{children:"email_or_phone_number"}),", ",(0,i.jsx)(n.code,{children:"password"}),", and ",(0,i.jsx)(n.code,{children:"confirmPassword"})," fields on the signup form. Each field accepts ",(0,i.jsx)(n.code,{children:"{ label?, placeholder?, hide?, notRequired? }"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"sample-usage-1",children:"Sample Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import { Authorizer } from '@authorizerdev/authorizer-react'\n\nconst LoginPage = () => {\n return (\n <>\n <h1 style={{ textAlign: 'center' }}>Login / Signup</h1>\n <br />\n <Authorizer\n onLogin={(loginResponse) => {}}\n onMagicLinkLogin={(magicLinkResponse) => {}}\n onSignup={(signupResponse) => {}}\n onForgotPassword={(forgotPasswordResponse) => {}}\n />\n </>\n )\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"authorizersignup",children:(0,i.jsx)(n.code,{children:"AuthorizerSignup"})}),"\n",(0,i.jsxs)(n.p,{children:["A component to render basic authentication singup form. Make sure it is used as Child of ",(0,i.jsx)(n.code,{children:"AuthorizerProvider"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"props-2",children:"Props"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onSignup={(response)=>{}}"}),": event called when signup form is submitted successfully."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"roles={string[]}"}),": optional. Restricts which roles the created account is granted."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"fieldOverrides={FormFieldsOverrides}"}),": optional. Per-field ",(0,i.jsx)(n.code,{children:"{ label?, placeholder?, hide?, notRequired? }"})," overrides for ",(0,i.jsx)(n.code,{children:"given_name"}),", ",(0,i.jsx)(n.code,{children:"family_name"}),", ",(0,i.jsx)(n.code,{children:"email_or_phone_number"}),", ",(0,i.jsx)(n.code,{children:"password"}),", and ",(0,i.jsx)(n.code,{children:"confirmPassword"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"sample-usage-2",children:"Sample Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import { AuthorizerSignup } from '@authorizerdev/authorizer-react'\n\nconst SignupPage = () => {\n return (\n <>\n <h1 style={{ textAlign: 'center' }}>Signup</h1>\n <br />\n <AuthorizerSignup onSignup={(response) => {}} />\n </>\n )\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"authorizerbasicauthlogin",children:(0,i.jsx)(n.code,{children:"AuthorizerBasicAuthLogin"})}),"\n",(0,i.jsxs)(n.p,{children:["A component to render basic authentication login form. Make sure this is used as Child of ",(0,i.jsx)(n.code,{children:"AuthorizerProvider"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"props-3",children:"Props"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onLogin={(response)=>{}}"}),": event called when login form is submitted successfully."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"roles={string[]}"}),": optional. Restricts which roles the login grants."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"sample-usage-3",children:"Sample Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import { AuthorizerBasicAuthLogin } from '@authorizerdev/authorizer-react'\n\nconst LoginPage = () => {\n return (\n <>\n <h1 style={{ textAlign: 'center' }}>Login</h1>\n <br />\n <AuthorizerBasicAuthLogin onLogin={(response) => {}} />\n </>\n )\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"authorizermagiclinklogin",children:(0,i.jsx)(n.code,{children:"AuthorizerMagicLinkLogin"})}),"\n",(0,i.jsxs)(n.p,{children:["A component to render magic link login form. Make sure this is used as Child of ",(0,i.jsx)(n.code,{children:"AuthorizerProvider"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"props-4",children:"Props"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onMagicLinkLogin={(response)=>{}}"}),": event called when magic link login form is submitted successfully."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"roles={string[]}"}),": optional. Restricts which roles the login grants."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"sample-usage-4",children:"Sample Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import { AuthorizerMagicLinkLogin } from '@authorizerdev/authorizer-react'\n\nconst LoginPage = () => {\n return (\n <>\n <h1 style={{ textAlign: 'center' }}>Login</h1>\n <br />\n <AuthorizerMagicLinkLogin onMagicLinkLogin={(response) => {}} />\n </>\n )\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"authorizersociallogin",children:(0,i.jsx)(n.code,{children:"AuthorizerSocialLogin"})}),"\n",(0,i.jsxs)(n.p,{children:["A component to render list of social media login buttons based on backend configurations (Google, GitHub, Facebook, LinkedIn, Apple, Twitter, Microsoft, Twitch, Roblox, and Discord \u2014 each shown only when its corresponding ",(0,i.jsx)(n.code,{children:"is_*_login_enabled"})," flag is on). Clicking a button navigates the browser directly to the provider's OAuth flow (",(0,i.jsx)(n.code,{children:"{authorizerURL}
1/oauth_login/{provider}"}),"); there are no submit callbacks. Make sure this is used as Child of ",(0,i.jsx)(n.code,{children:"AuthorizerProvider"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"props-5",children:"Props"}),"\n",(0,i.jsxs)(n.p,{children:["It has no required props. Both are normally supplied for you when composed inside ",(0,i.jsx)(n.code,{children:"Authorizer"}),"."]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"urlProps={Record<string, any>}"}),": optional. ",(0,i.jsx)(n.code,{children:"state"}),"/",(0,i.jsx)(n.code,{children:"scope"}),"/",(0,i.jsx)(n.code,{children:"redirect_uri"})," (or ",(0,i.jsx)(n.code,{children:"redirectURL"}),") forwarded onto the OAuth redirect URL."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"roles={string[]}"}),": optional. Restricts which roles the resulting login grants."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"sample-usage-5",children:"Sample Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import { AuthorizerSocialLogin } from '@authorizerdev/authorizer-react'\n\nconst LoginPage = () => {\n return (\n <>\n <h1 style={{ textAlign: 'center' }}>Login / Signup</h1>\n <br />\n <AuthorizerSocialLogin />\n </>\n )\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"authorizerpasskeylogin",children:(0,i.jsx)(n.code,{children:"AuthorizerPasskeyLogin"})}),"\n",(0,i.jsxs)(n.p,{children:['Renders a "Sign in with a passkey" button that performs a passwordless, usernameless (discoverable-credential) WebAuthn login. Unlike social login, there is no backend config flag for this \u2014 it renders purely based on browser support (',(0,i.jsx)(n.code,{children:"isWebauthnSupported()"}),"), and renders nothing when the browser can't do WebAuthn or when the org enforces MFA (",(0,i.jsx)(n.code,{children:"config.is_mfa_enforced"}),"), since passkey-as-sole-factor would let a user skip a required second factor. Make sure this is used as Child of ",(0,i.jsx)(n.code,{children:"AuthorizerProvider"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["If the account resolved by the passkey ceremony needs a second factor, this component internally takes over and renders the MFA setup, verification, or locked-account screen instead of the button \u2014 see ",(0,i.jsx)(n.a,{href:"#authorizermfasetup",children:(0,i.jsx)(n.code,{children:"AuthorizerMFASetup"})})," and ",(0,i.jsx)(n.a,{href:"#authorizerverifyotp",children:(0,i.jsx)(n.code,{children:"AuthorizerVerifyOtp"})}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"props-6",children:"Props"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onLogin={(data)=>{}}"}),": event called when the passkey login (or the MFA step that follows it) completes successfully."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onStepChange={(step)=>{}}"}),": optional. Fired whenever the component switches between ",(0,i.jsx)(n.code,{children:"'button' | 'mfa-setup' | 'mfa-verify' | 'locked'"}),". Useful when rendering other login options alongside this component, so they can be hidden while an MFA screen is showing."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"sample-usage-6",children:"Sample Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import { AuthorizerPasskeyLogin } from '@authorizerdev/authorizer-react'\n\nconst LoginPage = () => {\n return (\n <>\n <h1 style={{ textAlign: 'center' }}>Login</h1>\n <br />\n <AuthorizerPasskeyLogin onLogin={(data) => {}} />\n </>\n )\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"authorizerforgotpassword",children:(0,i.jsx)(n.code,{children:"AuthorizerForgotPassword"})}),"\n",(0,i.jsxs)(n.p,{children:["A component to render forgot password form. Make sure this is used as Child of ",(0,i.jsx)(n.code,{children:"AuthorizerProvider"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"props-7",children:"Props"}),"\n",(0,i.jsx)(n.p,{children:"No props exposed for this components"}),"\n",(0,i.jsx)(n.h3,{id:"sample-usage-7",children:"Sample Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import { AuthorizerForgotPassword } from '@authorizerdev/authorizer-react'\n\nconst ForgotPasswordPage = () => {\n return (\n <>\n <h1 style={{ textAlign: 'center' }}>Forgot Password?</h1>\n <br />\n <AuthorizerForgotPassword onForgotPassword={(response) => {}} />\n </>\n )\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"authorizerresetpassword",children:(0,i.jsx)(n.code,{children:"AuthorizerResetPassword"})}),"\n",(0,i.jsxs)(n.p,{children:["A component that can be used to reset the password. This component can be used in the page, which is configured with the backend as ",(0,i.jsx)(n.code,{children:"RESET_PASSWORD_URL"}),", check ",(0,i.jsx)(n.a,{href:"/core/server-config",children:"environment variables"}
1)," for more details. This component validates the token in the URL sent via email to the user and helps resetting the password."]}),"\n",(0,i.jsx)(n.h3,{id:"props-8",children:"Props"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onReset={(response) => {}}"}),": optional. Called when reset form is submitted. If omitted, the component redirects the browser to ",(0,i.jsx)(n.code,{children:"redirect_uri"})," (from the URL) or the configured ",(0,i.jsx)(n.code,{children:"redirectURL"})," on success."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"showOTPInput={boolean}"}),": optional, default ",(0,i.jsx)(n.code,{children:"false"}),". Renders an OTP field above the password fields \u2014 used for the mobile/phone forgot-password flow, where ",(0,i.jsx)(n.code,{children:"AuthorizerForgotPassword"})," renders this component itself with ",(0,i.jsx)(n.code,{children:"showOTPInput"})," set."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"phone_number={string}"}),": optional. The phone number the OTP was sent to; required alongside ",(0,i.jsx)(n.code,{children:"showOTPInput"})," for the phone reset flow."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"sample-usage-8",children:"Sample Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import { AuthorizerResetPassword } from '@authorizerdev/authorizer-react'\n\nconst ResetPassword = () => {\n return (\n <>\n <h1 style={{ textAlign: 'center' }}>Reset Password</h1>\n <br />\n <AuthorizerResetPassword onReset={(response) => {}} />\n </>\n )\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"authorizerverifyotp",children:(0,i.jsx)(n.code,{children:"AuthorizerVerifyOtp"})}),"\n",(0,i.jsxs)(n.p,{children:["A component to render the OTP/MFA verification form. It handles email/SMS OTP and ",(0,i.jsx)(n.a,{href:"https://datatracker.ietf.org/doc/html/rfc6238",children:"TOTP"}),' codes, and \u2014 when offered alongside a code factor \u2014 a "Verify with a passkey" WebAuthn option. On SMS OTP it also attempts WebOTP auto-fill (',(0,i.jsx)(n.code,{children:"navigator.credentials.get({ otp: ... })"}),") so supporting browsers can fill the code automatically. Make sure it is used as Child of ",(0,i.jsx)(n.code,{children:"AuthorizerProvider"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"props-9",children:"Props"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"email={string}"}),": optional. User email address the OTP was sent to. Not required for MFA continuations resolved purely from the session cookie (e.g. an OAuth-redirect or passkey-primary-login continuation, where the frontend never learns the identifier)."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"phone_number={string}"}),": optional. User phone number the OTP was sent to, as an alternative to ",(0,i.jsx)(n.code,{children:"email"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"is_totp={boolean}"}),": optional, default ",(0,i.jsx)(n.code,{children:"false"}),". Set when the pending factor is an authenticator-app (TOTP) code rather than an emailed/texted OTP \u2014 changes the help text and disables WebOTP/resend."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"offerWebauthnVerify={boolean}"}),": optional, default ",(0,i.jsx)(n.code,{children:"false"}),'. Shows the "Verify with a passkey" button above the code form when the account also has webauthn as an available MFA factor.']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"hasCodeFactor={boolean}"}),": optional, default ",(0,i.jsx)(n.code,{children:"false"}),". Whether a code-based factor (TOTP, or a verified email/SMS OTP) actually exists to fall back on. When ",(0,i.jsx)(n.code,{children:"false"})," and ",(0,i.jsx)(n.code,{children:"offerWebauthnVerify"})," is ",(0,i.jsx)(n.code,{children:"true"}),", passkey is the only option and the code form is hidden entirely."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"hasSmsOtp={boolean}"}),": optional, default ",(0,i.jsx)(n.code,{children:"false"}),". True specifically when the pending code factor is SMS-delivered \u2014 gates the WebOTP auto-fill call, which only makes sense for an incoming SMS."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onBack={()=>{}}"}),': optional. When provided, a "Back" link lets the user leave this challenge (e.g. return to the login screen) instead of being stuck mid-verification.']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onLogin={(response)=>{}}"}),": event called when the verify-OTP form (or passkey verification) is submitted successfully."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"sample-usage-9",children:"Sample Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import { AuthorizerVerifyOtp } from '@authorizerdev/authorizer-react'\n\nconst VerifyOtp = () => {\n return (\n <>\n <h1 style={{ textAlign: 'center' }}>Verify OTP</h1>\n <br />\n <AuthorizerVerifyOtp\n email=\"[email protected]\"\n hasCodeFactor\n onLogin={(response) => {}}\n />\n </>\n )\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"authorizertotpscanner",children:(0,i.jsx)(n.code,{children:"AuthorizerTOTPScanner"})}),"\n",(0,i.jsxs)(n.p,{children:["Shown right after a user opts into authenticator-app (TOTP) MFA: renders the QR code to scan, the setup key as a manual-entry fallback (with a copy button), the one-time recovery codes (copy/download/print), and then hands off to ",(0,i.jsx)(n.a,{href:"#authorizerverifyotp",children:(0,i.jsx)(n.code,{children:"AuthorizerVerifyOtp"})})," to confirm the first code. Make sure it is used as Child of ",(0,i.jsx)(n.code,{children:"AuthorizerProvider"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["You normally won't render this directly \u2014 ",(0,i.jsx)(n.a,{href:"#authorizermfasetup",children:(0,i.jsx)(n.code,{children:"AuthorizerMFASetup"})})," renders it for you once TOTP enrolment data is available."]}),"\n",(0,i.jsx)(n.h3,{id:"props-10",children:"Props"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"authenticator_scanner_image={string}"}),": required. Base64-encoded QR code image (rendered as ",(0,i.jsx)(n.code,{children:"data:image/jpeg;base64,..."}),")."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"authenticator_secret={string}"}),": required. The manual-entry setup key shown alongside the QR code."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"authenticator_recovery_codes={string[]}"}),": required. One-time recovery codes shown once, with copy/download/print actions."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"email={string}"}),": optional. Forwarded to the OTP-confirmation step."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"phone_number={string}"}),": optional. Forwarded to the OTP-confirmation step."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onLogin={(response)=>{}}"}),": optional. Forwarded to the OTP-confirmation step;
1 called once the first TOTP code is verified."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"setView={(v)=>{}}"}),": optional. Forwarded to the OTP-confirmation step for view-switching hosts (e.g. ",(0,i.jsx)(n.code,{children:"Authorizer"}),"'s internal login/signup view state)."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"sample-usage-10",children:"Sample Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import { AuthorizerTOTPScanner } from '@authorizerdev/authorizer-react'\n\nconst TotpSetup = ({ enrollment }) => {\n return (\n <AuthorizerTOTPScanner\n authenticator_scanner_image={enrollment.authenticator_scanner_image}\n authenticator_secret={enrollment.authenticator_secret}\n authenticator_recovery_codes={enrollment.authenticator_recovery_codes}\n onLogin={(response) => {}}\n />\n )\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"authorizermfasetup",children:(0,i.jsx)(n.code,{children:"AuthorizerMFASetup"})}),"\n",(0,i.jsxs)(n.p,{children:["The hub where a signed-in (or mid-login) user opts into the MFA methods the server offers: authenticator app (TOTP), passkey, email one-time code, and SMS one-time code. Only methods you flag as ",(0,i.jsx)(n.code,{children:"available"})," are shown, so users only ever see real options. TOTP and passkey have complete in-component enrolment flows (",(0,i.jsx)(n.a,{href:"#authorizertotpscanner",children:(0,i.jsx)(n.code,{children:"AuthorizerTOTPScanner"})})," and ",(0,i.jsx)(n.a,{href:"#authorizerpasskeyregister",children:(0,i.jsx)(n.code,{children:"AuthorizerPasskeyRegister"})}),"); email/SMS OTP are sent and confirmed via ",(0,i.jsx)(n.a,{href:"#authorizerverifyotp",children:(0,i.jsx)(n.code,{children:"AuthorizerVerifyOtp"})})," directly through the SDK, or delegated to your own UI via ",(0,i.jsx)(n.code,{children:"onSetupMethod"}),". Make sure it is used as Child of ",(0,i.jsx)(n.code,{children:"AuthorizerProvider"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"Authorizer"})," (and ",(0,i.jsx)(n.code,{children:"AuthorizerSignup"})," / ",(0,i.jsx)(n.code,{children:"AuthorizerBasicAuthLogin"})," / ",(0,i.jsx)(n.code,{children:"AuthorizerPasskeyLogin"}),') already render this automatically when the backend offers MFA setup during login/signup \u2014 you mainly need this directly to build a custom "Security settings" page where a user can add a second factor later.']}),"\n",(0,i.jsx)(n.h3,{id:"props-11",children:"Props"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"availableMfaMethods={AvailableMfaMethods}"}),": required. ",(0,i.jsx)(n.code,{children:"{ totp?: boolean; passkey?: boolean; emailOtp?: boolean; smsOtp?: boolean }"})," \u2014 which methods to offer. An omitted/",(0,i.jsx)(n.code,{children:"false"})," value hides that method entirely."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"totpEnrollment={{ authenticator_scanner_image, authenticator_secret, authenticator_recovery_codes }}"}),': optional. When present, choosing "Set up" for TOTP renders ',(0,i.jsx)(n.code,{children:"AuthorizerTOTPScanner"})," inline with this data immediately. When absent, the component fetches it for you via the SDK's ",(0,i.jsx)(n.code,{children:"totpMfaSetup"}),", unless ",(0,i.jsx)(n.code,{children:"onSetupMethod"})," is supplied."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onSetupMethod={(method: MfaMethod)=>{}}"}),": optional escape hatch. Called instead of the default SDK-driven flow when the user picks a method your host wants to handle itself (",(0,i.jsx)(n.code,{children:"'totp' | 'passkey' | 'email_otp' | 'sms_otp'"}),")."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"heading={string}"}),": optional, default ",(0,i.jsx)(n.code,{children:'"Add a second step to sign in"'}),". Heading text above the method list."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"loginContext={{ email?, phone_number?, state?, onComplete }}"}),': optional. Present only for the login-time (withheld-token) MFA offer, as opposed to a settings-page "add a second factor" hub. Adds a "Skip for now" action, and completing a method calls ',(0,i.jsx)(n.code,{children:"onComplete"})," with the token the server issues (instead of just closing/refreshing, as a settings-page usage would)."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onBack={()=>{}}"}),': optional. Shows a "Back" link on the top-level method list so the host can let the user leave MFA setup entirely.']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"passkeyRegistered={boolean}"}),': optional. Whether the signed-in user already has a passkey registered, so the passkey row can show an "Enabled" badge and "Manage" instead of "Set up".']}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"It also exports two supporting types:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"AvailableMfaMethods"})," \u2014 the shape of the ",(0,i.jsx)(n.code,{children:"availableMfaMethods"})," prop."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"MfaMethod"})," \u2014 ",(0,i.jsx)(n.code,{children:"'totp' | 'passkey' | 'email_otp' | 'sms_otp'"}),", the union passed to ",(0,i.jsx)(n.code,{children:"onSetupMethod"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"sample-usage-11",children:"Sample Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import { AuthorizerMFASetup } from '@authorizerdev/authorizer-react'\n\nconst SecuritySettings = () => {\n return (\n <AuthorizerMFASetup\n availableMfaMethods={{ totp: true, passkey: true, emailOtp: true }}\n heading=\"Add a second step to sign in\"\n />\n )\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"authorizerpasskeyregister",children:(0,i.jsx)(n.code,{children:"AuthorizerPasskeyRegister"})}),"\n",(0,i.jsxs)(n.p,{children:["Lets a signed-in user enrol a new passkey (WebAuthn credential) as an MFA / passwordless method, and optionally lists their already-registered passkeys. Complements ",(0,i.jsx)(n.a,{href:"#authorizerpasskeylogin",children:(0,i.jsx)(n.code,{children:"AuthorizerPasskeyLogin"})}),', which only handles the login ceremony. Since passkey support is a browser capability rather than a server config flag, this renders an "unsupported" notice \u2014 instead of nothing \u2014 when the browser can\'t run the WebAuthn ceremony, since in a settings context the user needs to know why the option is missing. Make sure it is used as Child of ',(0,i.jsx)(n.code,{children:"AuthorizerProvider"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"props-12",children:"Props"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"onSuccess={(data)=>{}}"}),": optional. Called after a passkey is successfully registered. During the login-time MFA-offer path (see ",(0,i.jsx)(n.code,{children:"mfaSetup"})," below) this carries the ",(0,i.jsx)(n.code,{children:"access_token"})," issued by completing a withheld MFA offer; a plain settings-page add never sets it."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"name={string}"}),": optional. A friendly name for the credential (e.g. ",(0,i.jsx)(n.code,{children:'"MacBook Touch ID"'}),"). When omitted, an inline text field is shown so the user can name it themselves."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"showCredentials={boolean}"}),": optional, default ",(0,i.jsx)(n.code,{children:"false"}),". Shows the list of already-registered passkeys above the add button. Requires an authenticated session (calls ",(0,i.jsx)(n.code,{children:"webauthnCredentials"}),"), so it's off by default."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"mfaSetup={{ email?, phoneNumber?, state? }}"}),": optional. Present only during a token-withheld login-time MFA offer \u2014 authenticates the registration ceremony via the MFA session cookie instead of a bearer token (there isn't one yet), and completing it issues the previously-withheld token."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"sample-usage-12",children:"Sample Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:"import { AuthorizerPasskeyRegister } from '@authorizerdev/authorizer-react'\n\nconst SecuritySettings = () => {\n return (\n <AuthorizerPasskeyRegister\n showCredentials\n onSuccess={(data) => {}}\n />\n )\n}\n"})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453(e,n,r){r.d(n,{R:()=>t,x:()=>d});var s=r(6540);const i={},o=s.createContext(i);function t(e){const n=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:t(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.