Authing DocsDocuments
Concept
Guides
Development Integration
Application integration
Concept
Guides
Development Integration
Application integration
Old Version
Development Integration
  • Login component

    • React
    • Vue
    • Angular
    • Native JavaScript
    • Complete parameter list
  • Single Sign-On (SSO)
  • JavaScript/Node.js

    • User Authentication Module

      • User authentication module
      • Standard agreement certification module
      • Scan code login module
      • Multi-factor authentication module
      • Social login module
      • Corporate identity source login module
      • Main authentication module
    • Management Module

      • Management user
      • Management application
      • Management role
      • Manage resources and permissions
      • Management groups
      • Management organization
      • Management User Custom Fields
      • Management registration white list
      • Management user pool configuration
      • Management MFA
      • Management subject certification
  • Java / Kotlin

    • User Authentication Module

      • Certified core module
      • Standard agreement certification module
    • Management Module

      • Management user
      • Management application
      • Management role
      • Management resources and permissions
      • Management groups
      • Management organization
      • Management User Custom Fields
      • Management registration white list
      • Management user pool configuration
      • Management log statistics
  • Python

    • User Authentication Module

      • Certified core module
      • Standard agreement certification module
      • Multi-factor authentication module
    • Management Module

      • Manage resources and permissions
      • Management application
      • Management groups
      • Management organization
      • Management strategy
      • Management subject certification
      • Management role
      • Management log statistics
      • Management User Custom Fields
      • Management user pool configuration
      • Management user
      • Management registration white list
  • C#

    • User Authentication Module
    • Management Module

      • Management user
      • Management role
      • Management permissions, access control
      • Management grouping
      • Management userpool configuration
      • Management registration white list
      • Management User Custom Fields
  • PHP

    • User Authentication Module
    • Management Module

      • Management user
      • Management application
      • Management role
      • Management resources and permissions
      • Management groups
      • Management organization
      • Management User Custom Fields
      • Management registration white list
      • Management userpool configuration
      • Management MFA
  • Go

    • User authentication module

      • Certified core module
    • Management module

      • Management resources and permissions
      • Management user
      • Management organization
      • Management role
  • Ruby
  • Android

    • Get started
    • Quick start
    • APIs

      • Authentication
      • OIDC
      • MFA
      • Scan to login
    • Social login

      • Wechat
      • Alipay
    • On-premise
  • iOS

    • Get started
    • Quick start
    • APIs

      • Authentication
      • OIDC
      • MFA
      • Scan to login
    • Social login

      • Wechat
      • Alipay
      • Apple
    • On-premise
  • Flutter

    • Get started
    • APIs

      • Authentication
      • OIDC
      • MFA
      • Scan to login
    • Social login
    • On-premise
  • React Native
  • WeChat Mini Program
  • WeChat webpage authorization
  • Framework Integration
  • Error code
  1. Development Integration
  2. /
  3. Login component

¶ Login Component (Guard)

Update Time: 2022-05-14 09:29:46
Edit

The Authing login component (Guard) is an embeddable login form that can be configured according to your needs and is recommended for single-page applications. It allows you to easily add various social login methods so that your users can log in seamlessly and have a consistent login experience on different platforms. Guard shields many implementation details of low-level authentication for developers, as well as cumbersome UI development.

Guard can be integrated into your React, Vue.js, Angular, and native JavaScript projects. You can use this component to quickly implement the login authentication process.

Guard demo

¶ Function list

¶ Rich login and registration methods

Built-in rich login and registration methods for developers to choose:

  • Account password login (including mobile phone number + password, email + password, user name + password);
  • SMS login;
  • APP scan code login (need to access APP scan code login first);
  • Social login, such as GitHub login (need to be configured in the background);
  • Enterprise identity source login (needs to configure enterprise identity source);

¶ Built-in forgot password process

The Guard has a built-in interactive UI for forgetting the password, so you don't need to write any additional code.

¶ Built-in multi-factor authentication (MFA) capability

Guard has built-in multi-factor authentication (MFA) function. When your application enables multi-factor authentication, users can use this component to complete multi-factor authentication. You don't need to write any additional code.

¶ Responsive layout

Responsive layout, perfectly compatible with mobile and PC terminals, and you can easily customize the login box style through custom CSS.

¶ Compatible with all mainstream front-end frameworks

  • Native JavaScript call;
  • Vue components;
  • React components;
  • Angular components.

¶ Online example

¶ Use in React project

You can include the @authing/react-ui-components package in your React project. For details, please refer to theReact login component usage documentation.

¶ Use in Vue.js project

You can include the @authing/vue-ui-components package in your Vue.js project. For details, please refer to the Vue.js login component usage documentation.

¶ Use in Angular project

You can include the @authing/ng-ui-components package in your Vue.js project. For details, please refer to the Angular login component usage documentation.

¶ Use in native JavaScript projects

You can include the @authing/native-js-ui-components package in your native JavaScript project. For details, please refer to the Native JavaScript login component usage documentation.

¶ Get help

Join us on forum: #authing-chat (opens new window)

Next: React
  • Function list
  • Online example
  • Use in React project
  • Use in Vue.js project
  • Use in Angular project
  • Use in native JavaScript projects
  • Get help

User identity management

Integrated third-party login
Mobile phone number flash check (opens new window)
Universal login form component
Custom authentication process

Enterprise internal management

Single Sign On
Multi-factor Authentication
Authority Management

Developers

Development Document
Framework Integration
Blog (opens new window)
GitHub (opens new window)
Community User Center (opens new window)

Company

400 888 2106
sales@authing.cn
16 / F, Block B, NORTH STAR CENTURY CENTER, Beijing(Total)
room 406, 4th floor, zone B, building 1, No. 200, Tianfu Fifth Street, Chengdu(branch)

Beijing ICP No.19051205-1

© Beijing Steamory Technology Co.