Installing
To Add this package to your project use the command
yarn add -D @hwdtech/login-components
Usage
Components to export
- Authorization
Types to export
- GetAuthFunc
Authorization usage
To provide authorization needs to define getAuth function which sends login and password to specified api and process the api response.
This function gets the following props:
type GetAuthProps = {
event: FormEvent<HTMLFormElement>,
login: string,
pass: string,
successHandler: (newValue: boolean) => void,
setErrorMessage: React.Dispatch<React.SetStateAction<string>>
}
Note that props event, login, setErrorMessage and pass provided by Authorization component therefore you need provide only setIsLoggedIn props.
setErrorMessage will show a received message.
successHandler should process successful login operation.
###Example
const getAuth: GetAuthFunc = async ({
event,
login,
pass,
setErrorMessage,
successHandler,
}) => {
event.preventDefault();
try {
const resp = await axios.post("/api/api-to-login", { login, pass });
if (resp.status === 200) {
setIsLoggedIn(someArguments);
}
} catch (e) {
setErrorMessage("Wrong login or password!");
}
}
Providing props to Authorization component
<Authorization successHandler={successHandler} getAuth={getAuth} />