Handles authenticating a registered user on your site.

Usage

import React from "react";

import {

LoginContainer,

LoginEmail,

LoginPassword,

LoginButton,

GoogleLoginButton,

FacebookLoginButton,

Auth0LoginButton,

Alert,

} from "@pelcro/react-pelcro-js";

export const CustomLoginView = () => {

return (

<LoginContainer

onSuccess={(userObject) => {

console.log(userObject);

}}

onFailure={(err) => {

console.error(err.message);

}}

>

<Alert />

<LoginEmail label="Email" />

<LoginPassword label="Password" />

<LoginButton />

<GoogleLoginButton />

<FacebookLoginButton />

<Auth0LoginButton />

</LoginContainer>

);

};

Reference

LoginContainer

Props

onSuccess

(userObject) ⇒ void

Callback function called when the user logs in succesfully.

onFailure

(errorObject) ⇒ void

Callback function called when the login fails.

Children components

Alert

Displays the relevant errors or success messages.

---

LoginEmail Required

Instance of Input

Input field component to receive the email of the user.

---

LoginPassword Required

Instance of Input

Input field component to receive the password of the user.

---

LoginButton Required

Instance of Button

A button component that submits the login form.

Props

name

string?

The title displayed inside the button

---

GoogleLoginButton

Sign in with google button.
Google App ID needs to be added in the site configurations.

Props

label

string? default is "Google"

The label text inside the button

className

string?

A class name added to the button.

labelClassName

string?

A class name added to the button's title.

iconClassName

string?

A class name added to the button's icon.

---

FacebookLoginButton

Sign in with facebook button.
Facebook App ID needs to be added in the site configurations.

Props

label

string? default is "Facebook"

The label text inside the button

className

string?

A class name added to the button.

labelClassName

string?

A class name added to the button's title.

iconClassName

string?

A class name added to the button's icon.

---

Auth0LoginButton

Sign in with Auth0 button.
Auth0 domain and client ID need to be added in the site configurations.

Props

label

string? default is "Auth0"

The label text inside the button

className

string?

A class name added to the button.

labelClassName

string?

A class name added to the button's title.

iconClassName

string?

A class name added to the button's icon.