react-native-firebase-auth-hoc

Auth HOC

Usage

import React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import withAuth, { Provider as AuthProvider } from 'react-native-firebase-auth-hoc';

function Home({ auth }) {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <Text>{JSON.stringify(auth.user)}</Text>
    </View>
  );
}

const HomeWithHOC = withAuth(Home, {
  style: {
    backgroundColor: '#fdfdfd'
  },
  buttonStyle: {
    backgroundColor: 'lightblue'
  }
});

class App extends React.Component {
  render() {
    return (
      <AuthProvider
        onInit={uid =>
          new Promise(r => {
            setTimeout(() => {
              r({ age: 30, gender: 'male' });
            }, 500);
          })
        }
      >
        <HomeWithHOC />
      </AuthProvider>
    );
  }
}

export default App;

Provider

Reference

Props

property	description
onInit	Functions executed at initialization and updating of custom user information.

onInit

NAME	TYPE	REQUIRED	DESCRIPTION
promise	Promise	Yes	Promise to return user information to add.

withAuth

Reference

Options

withAuth((Component: React.ComponentClass<any>), (options: Options = initialOptions));

emailConfig?: {
  title?: string;
  style?: {};
  textStyle?: {};
  renderButton?: Button;
} | null;
anonymousConfig?: {
  title?: string;
  style?: {};
  textStyle?: {};
  renderButton?: Button;
} | null;
facebookConfig?: {
  title?: string;
  style?: {};
  textStyle?: {};
  getToken: () => Promise<any>;
  renderButton?: Button;
};
googleConfig?: {
  title?: string;
  style?: {};
  textStyle?: {};
  getToken: () => Promise<any>;
  renderButton?: Button;
};
logoConfig?: {
  title?: string;
  style?: {};
  renderLogo?: () => Element;
};
initializerConfig?: {
  text?: string;
  style?: {};
  duration?: number;
  renderInitializer?: () => Element;
};
renderLoginBackScreen?: () => Element;
style?: {};

Property

property	description
user	firebase.user

Methods

methods	description
signIn	Change to login status.
signOut	Change to logout status.
signInAnonymously	Asynchronously signs in as an anonymous user.
signInWithFacebook	You can log in to Facebook via a promise function that returns a token.
signInWithGoogle	You can log in to Google via a promise function that returns a token.
createUserWithEmailAndPassword	Asynchronously signs in using an email and password.

signIn()

signIn();

---

signOut()

signOut();

---

signInAnonymously()

signInAnonymously();

---

signInWithFacebook()

signInWithFacebook: (promise: () => Promise<string>) => Promise<any>;

NAME	TYPE	REQUIRED	DESCRIPTION
promise	Promise	Yes	Promise to return a Facebook token

async function getExpoFacebookToken() {
  const response = await Expo.Facebook.logInWithReadPermissionsAsync(FACEBOOK_APP_ID, {
    permissions: ['public_profile', 'email'],
    behavior: 'web'
  });

  if (response.type === 'success') {
    return response.token;
  } else {
    throw new Error('Expo Error');
  }
}

signInWithFacebook(getExpoFacebookToken);

---

signInWithGoogle()

signInWithGoogle: (promise: () => Promise<string>) => Promise<any>;

NAME	TYPE	REQUIRED	DESCRIPTION
promise	Promise	Yes	Promise to return a Google token

async function getExpoGoogleToken() {
  const response = await Expo.Google.logInAsync({
    androidClientId: YOUR_CLIENT_ID_HERE,
    iosClientId: YOUR_CLIENT_ID_HERE,
    scopes: ['profile', 'email']
  });

  if (response.type === 'success') {
    return response.accessToken;
  } else {
    throw new Error('Expo Error');
  }
}

signInWithGoogle(getExpoGoogleToken);

---

createUserWithEmailAndPassword()

createUserWithEmailAndPassword: (email: string, password: string) => Promise<any>;

NAME	TYPE	REQUIRED	DESCRIPTION
email	string	Yes	email
password	string	Yes	password

Support

react-navigation

withAuth(createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

// Home, Settings -> screenProps.auth