English | 简体中文
Guard is a portable authentication component provided by authing. You can embed it in any application to handle complex user authentication processes in one stop.
Prepare your React project and follow the guide to connect Guard to your React project!
npm install --save @authing/guard-react
Key | Type | Default | Requires |
---|---|---|---|
appId | String | - | Y |
host | String | - | N |
redirectUri | String | - | N |
mode | normal / modal | normal | N |
defaultScene | GuardModuleType | login | N |
tenantId | String | - | N |
lang | zh-CN / en-US | zh-CN | N |
isSSO | Boolean | true | N |
config | Partial | - | N |
// From CDN
const guard = new GuardFactory.Guard({
appId: '62e22721c889dd44bad1dda2',
host: 'https://guard-test-2022.authing.cn',
redirectUri: 'http://localhost:3000/callback'
})
// From npm
import { GuardProvider } from '@authing/guard-react'
import '@authing/guard-react/dist/esm/guard.min.css'
function App() {
return (
<GuardProvider
appId="62e22721c889dd44bad1dda2"
host="https://guard-test-2022.authing.cn"
redirectUri="http://localhost:3000/callback"
>
<RouterComponent></RouterComponent>
</GuardProvider>
)
}
// use Guard APIs in Components
import { useGuard } from '@authing/guard-react'
const guard = useGuard()
Render Guard component
import React, { useEffect } from 'react'
import { useGuard } from '@authing/guard-react'
export default function Login() {
const guard = useGuard()
useEffect(() => {
guard.start('#guard')
}, [])
return <div id="guard"></div>
}
When the parameter 'mode' of Guard instantiation is' modal ', the modal mode is started, and the following API can be used to display and hide the guard.
guard.show()
guard.hide()
Login by code, redirect to login page
guard.startWithRedirect()
Auto handle redirect callback
guard.handleRedirectCallback()
Logout
guard.logout()
guard.on('load', e => {
console.log(e)
})
guard.on('login', userInfo => {
console.log(userInfo)
})
// ......
Guard integrated AuthenticationClient, so you can access all apis of AuthenticationClient, etc:
guard.getAuthClient().then(authClient => {
authClient.registerByEmail()
authClient.validateToken()
// ........
})
// ....
Refer to Authentication SDK
To check out live examples and docs, visit docs