@authing/guard-vue3 v5.3.4

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

Install

npm install --save @authing/guard-vue3

Initialize

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

// From npm
import { createApp } from 'vue'

import { GuardPlugin } from '@authing/guard-vue3'

import '@authing/guard-vue3/dist/esm/guard.min.css'

import App from './App.vue'

const app = createApp(App)

app.use(
  createGuard({
    appId: '62e22721c889dd44bad1dda2',
    host: 'https://guard-test-2022.authing.cn',
    redirectUri: 'http://localhost:3000/callback'
  })
)

// use Guard APIs in Components

// Composition API
<script scoped setup>
import { useGuard } from '@authing/guard-vue3'

const guard = useGuard()

guard.start('#home-container')
</script>


// Options API
<script scoped>
export default {
  mounted () {
    this.$guard.start('#home-container')
  }
}
</script>

Guard for Vue3 provides three login modes

Embed mode

Render Guard component

import { onMounted } from 'vue'

import { useGuard } from '@authing/guard-vue3'

const guard = useGuard()

onMounted(() => {
  guard.start('#home-container')
})

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

Login by code, redirect to login page

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