❤
npm
Sign UpSign In

react-native-firebase-auth-hoc

0.3.4 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-native-firebase-auth-hoc

Repository

github.com/loycord/react-native-firebase-auth-hoc

Homepage

github.com/loycord/react-native-firebase-auth-hoc#readme

Weekly Downloads

4

Version

0.3.4

License

MIT

Unpacked Size

59.4 kB

Total Files

29

Last publish

Collaborators

  • loycord
Try on RunKit
Report malware