This project is a authentication page with built-in buttons

This package is currently only maintained for Expo managed React Native projects, support for bare React Native projects is coming soon

Installation

Add the dependency:

npm i volkeno-react-native-auth

or

yarn add volkeno-react-native-auth

Login

Peer Dependencies

IMPORTANT! You need install them.

 "react": "^16.0.0-beta.5",
 "react-native": "^0.49.1"

Basic Usage

First step: import the component:

import { Login } from "volkeno-react-native-auth";

Second step: Use the login

export default function App() {
  const [showPassword, setShowPassword] = React.useState(false);
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [errors, setErrors] = React.useState({});

  const submit = async () => {
    Alert.alert("Félicitation", "Connexion réussie");
  };

  return (
    <View style={styles.container}>
      <Login
        showPassword={showPassword}
        setShowPassword={setShowPassword}
        email={email}
        setEmail={setEmail}
        password={password}
        setPassword={setPassword}
        errors={errors}
        setErrors={setErrors}
        title={"Login"}
        forgotPasswordText={"Mot de passe oublié ?"}
        OnSubmit={submit}
        textRedirectRegisterStyle={{ color: "red" }}
      />
    </View>
  );
}

Here we have a function which reacts when the connect button is clicked. showPassword and setShowPassword allows you to activate or deactivate the visibility of the password.

email and setEmail allows you to enter and modify the email variable when typing it.

password and setPassword are used to enter and modify the password variable when typed.

the variables errors and setErrors are mandatory. They allow you to display errors when validating the email and password

Configuration - Props

Props require

| Property | Type | Default | Description | | --------------- | :------: | :-----: | ------------------------------------------------------------------------------- | | showPassword | boolean | false | Activate to see the password | | setShowPassword | function | void | Called for allows you to activate or deactivate the visibility of the password. | | email | string | - | Enter email address | | setEmail | function | void | Called for allows you to enter and modify the email variable when typing it. | | password | string | - | Enter Password | | setPassword | function | void | Used to enter and modify the password variable when typed. | | errors | object | void | Object used to store email and password validation errors | | setErrors | function | void | They allow you to display errors when validating the email and password | | OnSubmit | function | void | Function that reacts when the connect button is clicked. |

Other props | Property | Type | Default | Description | | --------------- | :------: | :-----: | -------------------- | | title | string | "Connexion" | change connection text | | forgotPasswordText | string | - | Put a forgotten password text | | pressForgotPassword | function | void | handle forgotPasswordText button is pressed | | colorIconPassword | color | "#2FCA74" | eye color | | textConnexion | string | "SE CONNECTER" | change text on login button | | leftIconPassword | function | void | put a key icon 🔑 for the password | | leftIconEmail | function | void | put a mail icon 📧 for the email address | | textRedirectRegister | string | - | Allow to put a text which will make it possible to make a redirection towards the page of registration | | pressRedirectRegister | function | void | handle textRedirectRegister button is pressed |

Styles props | Property | Type | Default | Description | | --------------- | :------: | :-----: | -------------------- | | styles | style | {flex: 1, paddingHorizontal: 20} | modify or replace the default style of the entire page | | textRedirectRegisterStyle | style | { color: "#2FCA74",textAlign: "center",fontSize: 14 } | change or override the default styling for textRedirectRegister | | connexionButtonStyle | style | {backgroundColor: "#2FCA74",height: 50,minWidth: "100%",paddingHorizontal: 25} | modify or replace the default style of the connexion button | | connexionTitleStyle | style | {color: "white",fontWeight: "bold",letterSpacing: 1,ontSize: 14} | change or override the default styling for login text | | titleStyle | style | {marginVertical: 30,fontWeight: "bold",color: "#454545",fontSize: 36,textAlign: "center", | change or override the default styling for connexion text | | forgotPasswordTextStyle | style | { color: "#454545" }| hange or override the default styling forgotPasswordText|

export default function App() {
  const [showPassword, setShowPassword] = React.useState(false);
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [errors, setErrors] = React.useState({});

  const submit = async () => {
    Alert.alert("Félicitation", "Connexion réussie");
  };

  return (
    <View style={styles.container}>
      <Login
        OnSubmit={submit}
        pressForgotPassword={() => {
          Alert.alert("change passWord");
        }}
        pressRedirectRegister={() => {
          Alert.alert("redirect regidter");
        }}
        showPassword={showPassword}
        setShowPassword={setShowPassword}
        email={email}
        setEmail={setEmail}
        password={password}
        setPassword={setPassword}
        errors={errors}
        setErrors={setErrors}
        title={"Login"}
        forgotPasswordText={"Mot de passe oublié ?"}
        forgotPasswordTextStyle={{
          color: "red",
          textAlign: "center",
        }}
        titleStyle={{
          color: "red",
          marginVertical: 30,
          fontWeight: "bold",
          fontSize: 36,
          textAlign: "center",
        }}
        textConnexion={"Je me connect"}
        leftIconPassword={
          <Icon name="ios-lock-open-outline" size={20} color={Colors.bgApp2} />
        }
        leftIconEmail={
          <Icon name="mail-outline" size={20} color={Colors.bgApp2} />
        }
        textRedirectRegisterStyle={{ color: "red" }}
        textRedirectRegister="Je n'ai pas encore de compte"
        styles={{}}
      />
    </View>
  );
}

Social props

| Property | Type | Default | Description | | ---------------------------- | :------: | :-----: | --------------------------------------------------------------------- | | facebook | boolean | false | Activate to see the facebook button | | google | boolean | false | Activate to see the google button | | registerSocialSubmit | function | void | Function that reacts when one of the social media buttons is clicked | | facebookAppId | string | - | this is the AppId for Facebook. It is obligatory | | iosClientId | string | - | this is the iosClientId for Google. It is obligatory | | androidClientId | string | - | this is the androidClientId for Google. It is obligatory | | iosStandaloneAppClientId | string | - | this is the iosStandaloneAppClientId for Google. It is obligatory | | androidStandaloneAppClientId | string | - | this is the androidStandaloneAppClientId for Google. It is obligatory |

Register

Peer Dependencies

IMPORTANT! You need install them.

 "react": "^16.0.0-beta.5",
 "react-native": "^0.49.1"

Basic Usage

First step: import the component:

import { Register } from "volkeno-react-native-auth";

Second step: Use the register

export default function App() {
  const [showPassword, setShowPassword] = React.useState(false);
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [password_confirmation, setPassword_confirmation] = React.useState("");
  const [errors, setErrors] = React.useState({});

  const submit = async () => {
    Alert.alert("Félicitation", "Connexion réussie");
  };

  return (
    <View style={styles.container}>
      <Register
        OnSubmit={submit}
        setShowPassword={setShowPassword}
        showPassword={showPassword}
        email={email}
        setEmail={setEmail}
        password={password}
        setPassword={setPassword}
        password_confirmation={password_confirmation}
        setPassword_confirmation={setPassword_confirmation}
        errors={errors}
        setErrors={setErrors}
        textRedirectLogin="Je n'ai pas encore de compte"
      />
    </View>
  );
}

Here we have a function which reacts when the connect button is clicked. showPassword and setShowPassword allows you to activate or deactivate the visibility of the password.

email and setEmail allows you to enter and modify the email variable when typing it.

password and setPassword are used to enter and modify the password variable when typed.

the variables errors and setErrors are mandatory. They allow you to display errors when validating the email and password

Configuration - Props

Props require

| Property | Type | Default | Description | | ------------------------ | :------: | :-----: | ------------------------------------------------------------------------------- | | showPassword | boolean | false | Activate to see the password | | setShowPassword | function | void | Called for allows you to activate or deactivate the visibility of the password. | | email | string | - | Enter email address | | setEmail | function | void | Called for allows you to enter and modify the email variable when typing it. | | password | string | - | Enter password | | setPassword | function | void | Used to enter and modify the password variable when typed. | | password_confirmation | string | - | Enter Password Confirmation | | setPassword_confirmation | function | void | Used to enter and modify the Password Confirmation variable when typed. | | errors | object | void | Object used to store email and password validation errors | | setErrors | function | void | They allow you to display errors when validating the email and password | | OnSubmit | function | void | Function that reacts when the registration button is clicked. |

Other props

| Property | Type | Default | Description | | -------------------------- | :------: | :----------------------: | ---------------------------------------------------------------------------------------------------- | | title | string | "Connexion" | change connection text | | colorIconPassword | color | "#2FCA74" | eye color | | textButtonRegister | string | "S'inscrire" | change text on register button | | leftIconPassword | function | void | put a key icon 🔑 for the password | | leftIconEmail | function | void | put a mail icon 📧 for the email address | | leftIconFirstName | function | void | put an icon at firstName | | leftIconLastName | function | void | put an icon at lastName | | leftIconAdresse | function | void | put an icon at adresse | | leftIconPhone | function | void | put a phone icon 📞 for phone | | textRedirectLogin | string | "Je suis déjà inscrit" | Allow to put a text which will make it possible to make a redirection towards the page of connection | | pressRedirectLogin | function | void | handle textRedirectLogin button is pressed | | first_name | string | false | enter first_name if it exists | | last_name | string | false | enter last_name if it exists | | phone | string | false | enter phone if it exists | | adresse | string | false | enter adresse if it exists | | setFirstName | function | void | Called for allows you to enter and modify the first_name variable when typing it | | setLastName | function | void | Called for allows you to enter and modify the last_name variable when typing it | | setPhone | function | void | Called for allows you to enter and modify the phone variable when typing it | | setAdresse | function | void | Called for allows you to enter and modify the adresse variable when typing it | | labelEmail | string | "Adresse mail" | Change the Email label | | labelPassword | string | "Mot de Passe" | Change the password label | | labelPassword_confirmation | string | "Confirmer mot de passe" | Change the Password Confirmation label | | labelFirstName | string | "Prénom" | Change the first_name label if first_name exists | | labelLastName | string | "Nom" | Change the last_name label if last_name exists | | labelPhone | string | "Téléphone" | Change the phone label if phone exists | | labelAdresse | string | "Adresse" | Change the adresse label if adresse exists |

Styles props

| Property | Type | Default | Description | | ---------------------- | :---: | :---------------------------------------------------------------------------------------: | ------------------------------------------------------------ | | styles | style | {flex: 1, paddingHorizontal: 20} | modify or replace the default style of the entire page | | textRedirectLoginStyle | style | { color: "#2FCA74",textAlign: "center",fontSize: 14 } | change or override the default styling for textRedirectLogin | | connexionButtonStyle | style | {backgroundColor: "#2FCA74",height: 50,minWidth: "100%",paddingHorizontal: 25} | modify or replace the default style of the connexion button | | connexionTitleStyle | style | {color: "white",fontWeight: "bold",letterSpacing: 1,ontSize: 14} | change or override the default styling for login text | | titleStyle | style | {marginVertical: 30,fontWeight: "bold",color: "#454545",fontSize: 36,textAlign: "center", | change or override the default styling for connexion text |

Social props

| Property | Type | Default | Description | | ---------------------------- | :------: | :-----: | --------------------------------------------------------------------- | | facebook | boolean | false | Activate to see the facebook button | | google | boolean | false | Activate to see the google button | | registerSocialSubmit | function | void | Function that reacts when one of the social media buttons is clicked | | facebookAppId | string | - | this is the AppId for Facebook. It is obligatory | | iosClientId | string | - | this is the iosClientId for Google. It is obligatory | | androidClientId | string | - | this is the androidClientId for Google. It is obligatory | | iosStandaloneAppClientId | string | - | this is the iosStandaloneAppClientId for Google. It is obligatory | | androidStandaloneAppClientId | string | - | this is the androidStandaloneAppClientId for Google. It is obligatory |

Forgot Password

Peer Dependencies

IMPORTANT! You need install them.

 "react": "^16.0.0-beta.5",
 "react-native": "^0.49.1"

Basic Usage

First step: import the component:

import { RequestPasswordReset } from "volkeno-react-native-auth";

Second step: Use the RequestPasswordReset

export default function App() {
  const [email, setEmail] = React.useState("");
  const [errors, setErrors] = React.useState({});

  const submit = async () => {
    Alert.alert("Félicitation", "Connexion réussie");
  };

  return (
    <View style={styles.container}>
      <RequestPasswordReset
        OnSubmit={submit}
        email={email}
        setEmail={setEmail}
        errors={errors}
        setErrors={setErrors}
      />
    </View>
  );
}

Props require

| Property | Type | Default | Description | | --------- | :------: | :-----: | ---------------------------------------------------------------------------- | | email | string | - | Enter email address | | setEmail | function | void | Called for allows you to enter and modify the email variable when typing it. | | errors | object | void | Object used to store email and password validation errors | | setErrors | function | void | They allow you to display errors when validating the email and password | | OnSubmit | function | void | Function that reacts when the registration button is clicked. |

Other props

| Property | Type | Default | Description | | ------------------ | :------: | :-------------------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------- | | title | string | "Veuillez entrer votre email Nous vous enverrons un lien pour modifier le mot de passe" | change connection text | | leftIconEmail | function | void | put a mail icon 📧 for the email address | | textRedirectLogin | string | "Je suis déjà inscrit" | Allow to put a text which will make it possible to make a redirection towards the page of connection | | pressRedirectLogin | function | void | handle textRedirectLogin button is pressed | | labelEmail | string | "Adresse mail" | Change the Email label | | textValidate | string | "Valider" | change text on validate button |

Styles props

| Property | Type | Default | Description | | ---------------------- | :---: | :---------------------------------------------------------------------------------------: | ------------------------------------------------------------ | | styles | style | {flex: 1, paddingHorizontal: 20} | modify or replace the default style of the entire page | | textRedirectLoginStyle | style | { color: "#2FCA74",textAlign: "center",fontSize: 14 } | change or override the default styling for textRedirectLogin | | connexionButtonStyle | style | {backgroundColor: "#2FCA74",height: 50,minWidth: "100%",paddingHorizontal: 25} | modify or replace the default style of the connexion button | | connexionTitleStyle | style | {color: "white",fontWeight: "bold",letterSpacing: 1,ontSize: 14} | change or override the default styling for login text | | titleStyle | style | {marginVertical: 30,fontWeight: "bold",color: "#454545",fontSize: 36,textAlign: "center", | change or override the default styling for connexion text |

after that you can use ResetPassword

ResetPassword

Peer Dependencies

IMPORTANT! You need install them.

 "react": "^16.0.0-beta.5",
 "react-native": "^0.49.1"

Basic Usage

First step: import the component:

import { Login } from "volkeno-react-native-auth";

Second step: Use the login

export default function App() {
  const [email, setEmail] = React.useState("");
  const [code, setCode] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [confrimPassword, setConfrimPassword] = React.useState("");
  const [errors, setErrors] = React.useState({});

  const submit = async () => {
    Alert.alert("Félicitation", "Connexion réussie");
  };

  return (
    <View style={styles.container}>
      <ResetPassword
        OnSubmit={submit}
        email={email}
        setEmail={setEmail}
        code={code}
        setCode={setCode}
        password={password}
        setPassword={setPassword}
        confrimPassword={confrimPassword}
        setConfrimPassword={setConfrimPassword}
        errors={errors}
        setErrors={setErrors}
      />
    </View>
  );
}

Props require

| Property | Type | Default | Description | | ------------------ | :------: | :-----: | ------------------------------------------------------------------------------- | | showPassword | boolean | false | Activate to see the password | | setShowPassword | function | void | Called for allows you to activate or deactivate the visibility of the password. | | email | string | - | Enter email address | | setEmail | function | void | Called for allows you to enter and modify the email variable when typing it. | | code | string | - | Enter the code you received | | setCode | function | void | Called for allows you to enter and modify the code variable when typing it. | | password | string | - | Enter Password | | setPassword | function | void | Used to enter and modify the password variable when typed. | | confrimPassword | string | - | Enter Password Confirmation | | setPassword | function | void | Used to enter and modify the password variable when typed. | | setConfrimPassword | function | void | Used to enter and modify the password Confirmation variable when typed. | | errors | object | void | Object used to store email and password validation errors | | setErrors | function | void | They allow you to display errors when validating the email and password | | OnSubmit | function | void | Function that reacts when the connect button is clicked. |

Other props | Property | Type | Default | Description | | --------------- | :------: | :-----: | -------------------- | | title | string | "Veuillez entrer votre code puis modifier votre mot de passe" | change connection text | | colorIconPassword | color | "#2FCA74" | eye color | | textValidate | string | "Valider" | change text on validate button | | leftIconPassword | function | void | put a key icon 🔑 for the password | | leftIconEmail | function | void | put a mail icon 📧 for the email address | | leftIconCode | function | void | put a icon for the code | | labelCode | string | "Code" | Change the Code label | | labelEmail | string | "Adresse mail" | Change the Email label | | labelPassword | string | "Nouveau Mot de Passe" | Change the password label | | labelConfrimPassword | string | "Confirmer Nouveau Mot de Passe" | Change the Password Confirmation label |

Styles props | Property | Type | Default | Description | | --------------- | :------: | :-----: | -------------------- | | styles | style | {flex: 1, paddingHorizontal: 20} | modify or replace the default style of the entire page | | connexionButtonStyle | style | {backgroundColor: "#2FCA74",height: 50,minWidth: "100%",paddingHorizontal: 25} | modify or replace the default style of the connexion button | | connexionTitleStyle | style | {color: "white",fontWeight: "bold",letterSpacing: 1,ontSize: 14} | change or override the default styling for login text | | titleStyle | style | {marginVertical: 30,fontWeight: "bold",color: "#454545",fontSize: 36,textAlign: "center", | change or override the default styling for connexion text |