@authing/guard-shim-react18 NPM

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 native JavaScript project and follow the guide to connect Guard to your native JavaScript project!

Install

From CDN:

<link rel="stylesheet" href="https://cdn.authing.co/packages/guard/5.0.7/guard.min.css" />
<script src="https://cdn.authing.co/packages/guard/5.0.7/guard.min.js"></script>

From NPM:

npm install --save @authing/guard

Initialize

Key	Type	Default	Requires
appId	String	-	Y
mode	normal / modal	normal	N
defaultScene	GuardModuleType	login	N
align	none / left / center / right	none	N	Guard default position
lang	zh-CN / en-US	zh-CN	N
isSSO	Boolean	true	N
host	String	-	N
scope	String	-	N
redirectUri	String	-	N
state	String	-	N

// From CDN
const guard = new GuardFactory.Guard({
  appId: '62e22721c889dd44bad1dda2',
  host: 'https://guard-test-2022.authing.cn',
  redirectUri: 'http://localhost:3000/callback'
})

// From npm
const guard = new Guard({
  appId: '62e22721c889dd44bad1dda2',
  host: 'https://guard-test-2022.authing.cn',
  redirectUri: 'http://localhost:3000/callback'
})

Guard provides three login modes

Embed mode

Render Guard component

guard.start('#root').then(userInfo => {
  console.log(userInfo)
})

modal mode

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()

Redirect mode

guard.startWithRedirect()

Auto handle redirect callback

guard.handleRedirectCallback()

Logout

guard.logout()

Regist events

guard.on('load', e => {
  console.log(e)
})

guard.on('login', userInfo => {
  console.log(userInfo)
})

// ......

Integrate authing js sdk instance

Guard integrated AuthenticationClient, so you can access all apis of AuthenticationClient, etc:

guard.getAuthClient().then(authClient => {
  authClient.registerByEmail()
  authClient.validateToken()
  // .........
})
// ....

Refer to Authentication SDK

Documentation

To check out live examples and docs, visit docs

@infinitebrahmanuniverse/nolb-_auth @everything-registry/sub-chunk-97 @authing/guard-react18 @authing/react18-ui-components @zalastax/nolb-_auth

3 days ago

3 days ago

3 days ago

3 days ago

16 days ago

17 days ago

18 days ago

18 days ago

22 days ago

24 days ago

24 days ago

24 days ago

24 days ago

25 days ago

28 days ago

29 days ago

29 days ago

30 days ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

8 months ago

9 months ago

9 months ago

8 months ago

9 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago