# react-native-firebase-auth-hoc

> RN Auth-HOC

Latest version **0.3.4** (published 2018-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-firebase-auth-hoc
pnpm add react-native-firebase-auth-hoc
yarn add react-native-firebase-auth-hoc
bun add react-native-firebase-auth-hoc
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.4 |
| Published | 2018-09-21 |
| First published | 2018-08-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 58 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Seung Yeon Kim |
| Maintainers | loycord |

## Links

- npm: https://www.npmjs.com/package/react-native-firebase-auth-hoc
- Repository: https://github.com/loycord/react-native-firebase-auth-hoc
- Homepage: https://github.com/loycord/react-native-firebase-auth-hoc#readme
- Issues: https://github.com/loycord/react-native-firebase-auth-hoc/issues
- npm.io page: https://npm.io/package/react-native-firebase-auth-hoc

## Dependencies (5)

- [react](https://npm.io/package/react.md) 16.3.1
- [firebase](https://npm.io/package/firebase.md) ^5.4.1-0
- [react-native](https://npm.io/package/react-native.md) ~0.55.2
- [react-navigation](https://npm.io/package/react-navigation.md) ^2.12.1
- [react-native-loading-hoc](https://npm.io/package/react-native-loading-hoc.md) ^0.2.0

## Recent versions

- 0.3.4 (latest) — 2018-09-21
- 0.3.3 — 2018-09-19
- 0.3.2 — 2018-09-07
- 0.3.1 — 2018-09-07
- 0.3.0 — 2018-09-07
- 0.2.0 — 2018-08-31
- 0.1.5 — 2018-08-27
- 0.1.4 — 2018-08-27
- 0.1.3 — 2018-08-26
- 0.1.2 — 2018-08-25
- 0.1.1 — 2018-08-25
- 0.1.0 — 2018-08-25

## README

# Auth HOC

## Usage

```jsx
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](#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

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

```javascript
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](#signin)                                                 | Change to login status.                                                 |
| [signOut](#signout)                                               | Change to logout status.                                                |
| [signInAnonymously](#signinanonymously)                           | Asynchronously signs in as an anonymous user.                           |
| [signInWithFacebook](#signinwithfacebook)                         | You can log in to Facebook via a promise function that returns a token. |
| [signInWithGoogle](#signinwithgoogle)                             | You can log in to Google via a promise function that returns a token.   |
| [createUserWithEmailAndPassword](#createuserwithemailandpassword) | Asynchronously signs in using an email and password.                    |

#### signIn()

```javascript
signIn();
```

---

#### signOut()

```javascript
signOut();
```

---

#### signInAnonymously()

```javascript
signInAnonymously();
```

---

#### signInWithFacebook()

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

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

```javascript
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()

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

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

```javascript
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()

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

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

## Support

### [react-navigation](https://reactnavigation.org/)

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

// Home, Settings -> screenProps.auth
```

---
_Source: https://npm.io/package/react-native-firebase-auth-hoc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._