ellenox-firebase-auth 🔥

Provides ready to use Google button and Phone auth functions for authentication in expo-firebase projects.

Prerequisites

⚠️ Peer Dependencies

• expo-auth-session
• firebase

This component has a peer dependency on expo-auth-session. expo-auth-session has to be installed and linked into your project. Follow expo-auth-session to install the dependency.

This component has a peer dependency on firebase. firebase has to be installed and linked into your project. Follow firebase to install the dependency.

Installation

Supported version: react-native >= 0.59.0

npm install ellenox-firebase-auth

or

yarn add ellenox-firebase-auth

Example

Sign in with google

import { GoogleButton } from 'ellenox-firebase-auth';

....

<GoogleButton
  auth={auth} // const auth = getAuth(app);
  config={{
    expoClientId: WEB_CLIENT_ID,
    androidClientId: STANDALONE_ANDROID_CLIENT_ID,
    iosClientId: STANDALONE_IOS_CLIENT_ID,
  }}
  title={"Continue with Google"}
  handleError={(error) => console.log(error)}
  handleSuccess={(response) => console.log(response)}
  loaderColor="red"
/>

Sign in with phone number

import { sendOTPToPhoneNumber, signInWithPhoneNumber } from 'ellenox-firebase-auth';
import { FirebaseRecaptchaVerifierModal } from "expo-firebase-recaptcha";

....

const LoginScreen = () => {
  const recaptchaVerifier = useRef(null);
  const [verificationId, setVerificationId] = useState("");

  const sendOTPHandler = () => {
    sendOTPToPhoneNumber(
      auth,
      "+911234567890",
      recaptchaVerifier,
      handleOTPSuccess,
      handleOTPError
    );
  };

  const handleOTPSuccess = (responseId) => {
    setVerificationId(responseId);
  };

  const handleOTPError = (error) => {
    console.log(error);
  };

  const signInHandler = () => {
    signInWithPhoneNumber(
      auth,
      verificationId,
      OTP,
      handleSuccess,
      handleError
    );
  }

  return (
    <>
      <FirebaseRecaptchaVerifierModal
        ref={recaptchaVerifier}
        firebaseConfig={firebaseConfig} // your firebase config
        attemptInvisibleVerification={false}
      />
      <Button
        title={"Get OTP"}
        onPress={sendOTPHandler}
      />
      <Button
        title={"Verify and Sign in"}
        onPress={signInHandler}
      />
    <>
  )
}

Props

GoogleButton Props

| Prop | Description | Type | Default Value | Required | | :------------: | :----------------------------------------- | :-----------------: | :-------------------------------------------------------: | :------: | | auth | your project app auth | Firebase Auth | undefined | true | | config | google config ids for different platforms | Google Config | undefined | true | | icon | local path to google icon | ImageSourcePropType | 'https://cdn-icons-png.flaticon.com/512/2991/2991148.png' | false | | loaderColor | color to show when loading | String | '#000' | false | | title | title of button | String | undefined | true | | buttonStyle | custom style for View | ViewStyle | | false | | containerStyle | custom style for TouchableOpacity | ViewStyle | | false | | iconStyle | custom style for google icon | ImageStyle | | false | | textStyle | custom style for button text | TextStyle | | false | | handleError | callback for google authentication error | Function | undefined | true | | handlePress | callback for google button press | Function | () => {} | false | | handleSuccess | callback for google authentication success | Function | undefined | true |

sendOTPToPhoneNumber Params

| Param | Description | Type | Default Value | Required | | :---------------: | :--------------------------------------------- | :-----------: | :-----------: | :------: | | auth | your project app auth | Firebase Auth | | true | | phoneNumber | valid phone number with country code | String | | true | | recaptchaVerifier | recaptcha reference | Reference | | true | | handleSuccess | callback for phone number verification success | Function | | false | | handleError | callback for phone number verification error | Function | | false |

signInWithPhoneNumber Params

| Param | Description | Type | Default Value | Required | | :--------------: | :-------------------------------------------- | :-----------: | :-----------: | :------: | | auth | your project app auth | Firebase Auth | | true | | verificationId | verification id when phone number is verified | String | | true | | verificationCode | otp sent to phone number | String | | true | | handleSuccess | callback for phone authentication success | Function | | false | | handleError | callback for phone authentication error | Function | | false |

License

This project is licensed under the ISC License.