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