@8base/web-auth0-auth-client 中文文档教程
8base web auth0 auth client
AuthProvider
的 8base auth0 身份验证客户端。
WebAuth0AuthClient
Table of Contents
WebAuth0AuthClient
创建 web auth0 身份验证客户端的实例。
Parameters
workspaceId
string Identifier of the 8base app workspace.domain
string Domain. See auth0 documentation.clientId
string Client id. See auth0 documentation.redirectUri
string Redurect uri. See auth0 documentation.
Usage
Without authentication profile
import { AuthContext, AuthProvider, type AuthContextProps } from '@8base/react-auth';
import { WebAuth0AuthClient } from '@8base/web-auth0-auth-client';
const authClient = new WebAuth0AuthClient({
domain: 'domain',
clientId: 'client-id',
redirectUri: `${window.location.origin}/auth/callback`,
logoutRedirectUri: `${window.location.origin}/auth`,
});
const renderAuth = (auth) => {
const authorize = async () => {
const authData = await auth.authorize();
await auth.setAuthState({
token: authData.idToken,
email: authData.email,
});
};
const logout = async () => {
await auth.purgeState();
await auth.logout();
};
if (auth.isAuthorized) {
return (
<div>
<p>Hi ${auth.authState.email} !</p>
<button type='button' onClick={ logout }>Logout</button>
</div>
);
}
return (
<div>
<button type='button' onClick={ authorize }>Authorize with auth0<button/>
</div>
);
};
...
<AuthProvider authClient={ authClient }>
...
<AuthContext.Consumer>
{ renderAuth }
</AuthContext.Consumer>
...
</AuthProvider>
With custom authentication profile
...
import { WebAuth0AuthClient } from '@8base/web-auth0-auth-client';
const authClient = new WebAuth0AuthClient({
domain: 'domain',
clientId: 'client-id',
redirectUri: `${window.location.origin}/auth/callback`,
logoutRedirectUri: `${window.location.origin}/auth`,
workspaceId: 'workspace-id',
profile: {
id: 'profile-id',
},
});
...
With default authentication profile
...
import { WebAuth0AuthClient } from '@8base/web-auth0-auth-client';
const authClient = new WebAuth0AuthClient({
domain: 'domain',
clientId: 'client-id',
redirectUri: `${window.location.origin}/auth/callback`,
logoutRedirectUri: `${window.location.origin}/auth`,
workspaceId: 'workspace-id',
profile: {
id: 'profile-id',
isDefault: true,
},
});
...
8base web auth0 auth client
The 8base auth0 auth client for the AuthProvider
.
WebAuth0AuthClient
Table of Contents
WebAuth0AuthClient
Create an instance of the web auth0 auth client.
Parameters
workspaceId
string Identifier of the 8base app workspace.domain
string Domain. See auth0 documentation.clientId
string Client id. See auth0 documentation.redirectUri
string Redurect uri. See auth0 documentation.
Usage
Without authentication profile
import { AuthContext, AuthProvider, type AuthContextProps } from '@8base/react-auth';
import { WebAuth0AuthClient } from '@8base/web-auth0-auth-client';
const authClient = new WebAuth0AuthClient({
domain: 'domain',
clientId: 'client-id',
redirectUri: `${window.location.origin}/auth/callback`,
logoutRedirectUri: `${window.location.origin}/auth`,
});
const renderAuth = (auth) => {
const authorize = async () => {
const authData = await auth.authorize();
await auth.setAuthState({
token: authData.idToken,
email: authData.email,
});
};
const logout = async () => {
await auth.purgeState();
await auth.logout();
};
if (auth.isAuthorized) {
return (
<div>
<p>Hi ${auth.authState.email} !</p>
<button type='button' onClick={ logout }>Logout</button>
</div>
);
}
return (
<div>
<button type='button' onClick={ authorize }>Authorize with auth0<button/>
</div>
);
};
...
<AuthProvider authClient={ authClient }>
...
<AuthContext.Consumer>
{ renderAuth }
</AuthContext.Consumer>
...
</AuthProvider>
With custom authentication profile
...
import { WebAuth0AuthClient } from '@8base/web-auth0-auth-client';
const authClient = new WebAuth0AuthClient({
domain: 'domain',
clientId: 'client-id',
redirectUri: `${window.location.origin}/auth/callback`,
logoutRedirectUri: `${window.location.origin}/auth`,
workspaceId: 'workspace-id',
profile: {
id: 'profile-id',
},
});
...
With default authentication profile
...
import { WebAuth0AuthClient } from '@8base/web-auth0-auth-client';
const authClient = new WebAuth0AuthClient({
domain: 'domain',
clientId: 'client-id',
redirectUri: `${window.location.origin}/auth/callback`,
logoutRedirectUri: `${window.location.origin}/auth`,
workspaceId: 'workspace-id',
profile: {
id: 'profile-id',
isDefault: true,
},
});
...