Ellenox-firebase-auth NPM

ellenox-firebase-auth 🔥

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

Prerequisites

⚠️ Peer Dependencies

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

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	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	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