Skip to content

Commit

Permalink
docs: README is updated and version 1 is publishing
Browse files Browse the repository at this point in the history
  • Loading branch information
WrathChaos committed Apr 24, 2022
1 parent 8fc4ff2 commit d052431
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 68 deletions.
144 changes: 77 additions & 67 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,116 +1,126 @@
<img alt="React Native Typescript Library Starter" src="assets/logo.png" width="1050"/>
<img alt="React Native Social Auth Helper" src="assets/logo.png" width="1050"/>

[![React Native Typescript Library Starter](https://img.shields.io/badge/-Extremely%20easy%20to%20create%20a%20React%20Native%20Component%20Library%20with%20both%20Stateful%20and%20Functional%20Component%20Examples-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-typescript-library-starter)

[![npm version](https://img.shields.io/npm/v/react-native-typescript-library-starter.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-typescript-library-starter)
[![npm](https://img.shields.io/npm/dt/react-native-typescript-library-starter.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-typescript-library-starter)
[![npm version](https://img.shields.io/npm/v/react-native-social-auth-helper.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-social-auth-helper)
[![npm](https://img.shields.io/npm/dt/react-native-social-auth-helper.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-social-auth-helper)
![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)

<p align="center">
<img alt="React Native Typescript Library Starter"
src="assets/Screenshots/typescript.jpg" />
</p>

## Library Usage

- `npm i`
- `npm run husky:setup`
- Delete example folder
- Delete build folder
- Make your own library into the `lib` folder
- Change package.json
- Change README for your own documentation
- `npm run build`

```
> react-native-typescript-library-starter@0.1.0 build /Users/kuray/Coursion/MyLibraries/ReactNative/react-native-typescript-library-starter
> cd lib && tsc && cp ../package.json ../build/dist/ && Echo Build completed!
Build completed!
```

- Test your build/dist into the new project
- Finally, time to npm publish :)

### Below part is for Documentation ! Remove above Library Usage

# Installation

Add the dependency:

```bash
npm i react-native-typescript-library-starter
npm i react-native-social-auth-helper
```

## Peer Dependencies

<h5><i>IMPORTANT! You need install them</i></h5>

```js
"react": ">= 16.x.x",
"react-native": ">= 0.55.x"
```json
"@invertase/react-native-apple-authentication": ">= 2.1.5",
"@react-native-firebase/auth": ">= 14.8.0",
"@react-native-google-signin/google-signin": ">= 7.2.2",
"react-native-fbsdk-next": ">= 8.0.0"
```

# Usage

## Import

```jsx
import MyComponent from "react-native-typescript-library-starter";
import {
appleLogin,
facebookLogin,
fetchFacebookUserData,
googleLogin,
} from "react-native-social-auth-helper";
```

## Fundamental Usage
## Facebook Login Usage

```jsx
<MyComponent />
```js
import {
facebookLogin,
fetchFacebookUserData,
} from "react-native-social-auth-helper";
import { AccessToken } from "react-native-fbsdk-next";

export const handleFacebookLogin = async () => {
await facebookLogin();
const fbCredential = await AccessToken.getCurrentAccessToken();
const fbAccessToken = fbCredential.accessToken.toString();
// Create a Firebase credential with the AccessToken
const authCredential = auth.FacebookAuthProvider.credential(
fbCredential.accessToken,
);
const fbUserData = await fetchFacebookUserData(fbAccessToken);
const { id, email, name, picture } = fbUserData.data;
await auth().signInWithCredential(authCredential);
// Successfully login and fetched the facebook user data
// ... your logic
}
```

## Example Project 😍

You can checkout the example project 🥰

Simply run

- `npm i`
- `react-native run-ios/android`
## Google Login Usage

should work of the example project.
Do not forget to add your webCientId for Google configuration

# Configuration - Props

## Fundamentals
```js
import { googleLogin } from "react-native-social-auth-helper";
import { GoogleSignin } from "@react-native-google-signin/google-signin";

GoogleSignin.configure({
offlineAccess: false,
webClientId:
"your-web-client-id",
});

export const handleGoogleLogin = async () => {
await GoogleSignin.hasPlayServices();
const { authCredential, user } = await googleLogin();
const { id, email, name, photo } = user;
// Successfully login and fetched the google user data
// ... your logic
}
```

| Property | Type | Default | Description |
| ----------- | :----: | :-------: | --------------------- |
| title | string | undefined | change the title |
| description | string | undefined | change the descrition |

## Customization (Optionals)
## Apple Login Usage

| Property | Type | Default | Description |
| -------------- | :-------: | :-------: | ---------------------------------------------------------------------- |
| enableButton | boolean | false | let you enable the button (must use it for button) |
| onPress | function | undefined | set your own logic for the button functionality when it is pressed |
| buttonText | string | undefined | change the button's text |
| style | ViewStyle | default | set or override the style object for the main container |
| buttonStyle | ViewStyle | default | set or override the style object for the button style |
| ImageComponent | Image | default | set your own component instead of default react-native Image component |
```js
import { appleLogin } from "react-native-social-auth-helper";

export const handleGoogleLogin = async () => {
const { appleAuthRequestResponse, userCredential } = await appleLogin();
const { email, fullName } = appleAuthRequestResponse;
const userData = {
id: userCredential.user.uid,
socialId: userCredential.user.providerData[0].uid,
socialType: SOCIAL_TYPE.APPLE,
email: email,
username: fullName?.givenName || null,
photo: userCredential.user.photoURL,
};
// Successfully login and fetched the apple user data
// ... your logic
}
```

## Future Plans

- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium

# Change Log

Change log will be here !

## Author

FreakyCoder, kurayogun@gmail.com

## License

React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info.
React Native Social Auth Helper is available under the MIT license. See the LICENSE file for more info.
Binary file removed assets/Screenshots/typescript.jpg
Binary file not shown.
Binary file modified assets/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-social-auth-helper",
"version": "0.1.4-alpha.1",
"version": "1.0.0",
"description": "All in one place for social authentication helper in React Native",
"main": "./build/dist/index.js",
"repository": "git@github.com:WrathChaos/react-native-social-auth-helper.git",
Expand Down

0 comments on commit d052431

Please sign in to comment.