¶ React Login Component

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 project in a componentized form, and you can use this component to quickly implement the login authentication process.

¶ Quick start

¶ Installation

$ yarn add @authing/react-ui-components

# OR

$ npm install @authing/react-ui-components --save

¶ Initialization

Initialize in React project:

import React from "react";
import ReactDOM from "react-dom";
import { authingGuard } from "@authing/react-ui-components";
// import css files
import "@authing/react-ui-components/lib/index.min.css";

const App = () => {
  const appId = "AUTHING_APP_ID";
  const onLogin = userInfo => {
    console.log(userInfo);
  };
  return <authingGuard appId={appId} onLogin={onLogin} />;
};

ReactDOM.render(<App />, root);

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@authing/react-ui-components"></script>

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/@authing/react-ui-components/lib/index.min.css" rel="stylesheet"></link>

<script>
  var App = () => {
    const appId = "authing\_APP\_ID";
    const onLogin = userInfo => {
      console.log(userInfo);
    };
    return <authingReactUIComponents.authingGuard appId={appId} />;
  };

  ReactDOM.render(<App />, root);
</script>

¶ Monitor login events

authing-guardComponent Callback function foronLogin` event，which is called when the user successfully logs in, and you can get the user information of the current user here.View the complete list of events.

import { authingGuard } from "@authing/react-ui-components";
import "@authing/react-ui-components/lib/index.min.css";

function App() {
  return (
    <div className="App">
      <authingGuard
        appId="AUTHING_APP_ID"
        onLogin={userInfo => {
          console.log(userInfo);
        }}
      />
    </div>
  );
}

const axios = require("axios");
axios
  .get({
    url: "https://yourdomain.com/api/v1/your/resources",
    headers: {
      Authorization: "Bearer ID_TOKEN"
    }
  })
  .then(res => {
    // custom codes
  });

¶ Add social login

Pass in the socialConnections list in the initialization parameter config to specify the social logins that need to be displayed(all social logins configured by the applicationare displayed by default).

import { authingGuard, SocialConnections } from "@authing/react-ui-components";

function App() {
  return (
    <div className="App">
      <authingGuard
        appId="AUTHING_APP_ID"
        onLogin={userinfo => {
          console.log(userinfo);
        }}
        config={{
          socialConnections: [SocialConnections.Github]
        }}
      />
    </div>
  );
}

¶ Log out

1. Initialize the [AuthenticationClient](/reference/sdk-for-node/#Use 认证模块)in the project entry file.

import { initAuthClient } from "@authing/react-ui-components";

initAuthClient({
  appId: "AUTHING_APP_ID"
});

2. Add a button to log out and bind the click event to getAuthClient().logout().

import React from "react";
import { getAuthClient } from "@authing/react-ui-components";

const LogoutButton = () => {
  return <button onClick={() => getAuthClient().logout()}>Log out</button>;
};

export default LogoutButton;

¶ Implement single sign-on

To use Guard for single sign-on, you need to set isSSO to true during initialization and pass in appHost (application domain name):

const guard = new authingGuard("AUTHING_APP_ID", {
  appHost: "https://xxx.authing.cn",
  isSSO: true
});

¶ Use React Hooks

Guard provides useAuthing to facilitate user management.

import React, { useEffect } from "react";
import { useauthing, initAuthClient } from "@authing/react-ui-components";
// Initialize authClient before using useAuthing
initAuthClient({
  appId: "AUTHING_APP_ID"
});

export const useInfo = () => {
  const { authClient } = useauthing();
  const [user, setUser] = useState();

  useEffect(() => {
    authClient.getCurrent().then(user => setUser(user));
  }, []);

  return <div>Username: {user && user.username}</div>;
};

¶ Export authing-js-sdk

The Guard components are packaged based on the authing JavaScript SDK. When you need to perform some more advanced operations (such as managing user-defined data, modifying user information, logging out):

1. Call initAuthClient to initialize AuthenticationClient. Calling this function multiple times will only initialize it once.

import { initAuthClient } from "@authing/react-ui-components";

initAuthClient({
  appId: "AUTHING_APP_ID"
});

2. Then use getAuthClient to get the AuthenticationClient instance.

import { getAuthClient } from "@authing/react-ui-components";

const authClient = getAuthClient();

3. Call the method of the AuthenticationClient instance. For a complete list of methods, please see the AuthenticationClient method list.

authClient.getCurrentUser().then(user => console.log(user));

¶ Complete parameter

The Authing login component (Guard) provides many advanced configurations, such as customizing the UI and using specific login methods. See the complete parameter list.

¶ Event list

¶ Privatization deployment

The privatization deploymentscenario needs to specify the GraphQL endpoint of your privatized Authing service(without protocol header and Path).If you are not sure, you can contact the Authing IDaaS service administrator.

import React from "react";
import { authingGuard } from "@authing/react-ui-components";
import "@authing/react-ui-components/lib/index.min.css";

const App = () => {
  const appId = "AUTHING_APP_ID";
  const config = {
    apiHost: "https://core.you-authing-service.com"
  };
  return <authingGuard appId={appId} />;
};

¶ Online experience

¶ Get help

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