├── .editorconfig ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ ├── main.yml │ └── size.yml ├── .gitignore ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── example ├── .env ├── .gitignore ├── .prettierrc ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.tsx │ ├── UserForm.tsx │ ├── firebaseConfig.ts │ ├── index.tsx │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts ├── tsconfig.json └── yarn.lock ├── package.json ├── rollup.config.js ├── src ├── getErrorMessageForProvider.ts ├── index.tsx ├── setupTests.ts └── test.tsx ├── tsconfig.json ├── tsconfig.test.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: [push] 3 | jobs: 4 | build: 5 | name: Build, lint, test and release on Node 16 6 | runs-on: ubuntu-latest 7 | steps: 8 | - name: Checkout repo 9 | uses: actions/checkout@v2 10 | 11 | - name: Use Node 16 12 | uses: actions/setup-node@v1 13 | with: 14 | node-version: 16 15 | 16 | - name: Install deps and build (with cache) 17 | uses: bahmutov/npm-install@v1 18 | 19 | - name: Lint 20 | run: yarn lint 21 | 22 | - name: Test 23 | run: yarn test --ci --coverage --maxWorkers=2 24 | 25 | - name: Coverage 26 | run: npx codecov -f coverage/*.json 27 | 28 | - name: Pack Inspect 29 | run: yarn pack:inspect 30 | 31 | - name: Release 32 | env: 33 | GITHUB_TOKEN: ${{ secrets.GH_PAT }} 34 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 35 | GH_AUTHOR_NAME: github-actions 36 | GH_AUTHOR_EMAIL: actions@github.com 37 | run: yarn semantic-release 38 | 39 | - name: Build Example 40 | if: ${{ github.ref == 'refs/heads/master' }} 41 | env: 42 | PUBLIC_URL: https://armand1m.github.io/react-with-firebase-auth/ 43 | run: yarn build:example 44 | 45 | - name: Deploy Example 46 | uses: peaceiris/actions-gh-pages@v3 47 | if: ${{ github.ref == 'refs/heads/master' }} 48 | with: 49 | github_token: ${{ secrets.GITHUB_TOKEN }} 50 | publish_dir: ./example/build 51 | -------------------------------------------------------------------------------- /.github/workflows/size.yml: -------------------------------------------------------------------------------- 1 | name: size 2 | on: [pull_request] 3 | jobs: 4 | size: 5 | runs-on: ubuntu-latest 6 | env: 7 | CI_JOB_NUMBER: 1 8 | steps: 9 | - uses: actions/checkout@v1 10 | - uses: andresz1/size-limit-action@v1 11 | with: 12 | github_token: ${{ secrets.GITHUB_TOKEN }} 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # See https://help.github.com/ignore-files/ for more about ignoring files. 3 | 4 | # dependencies 5 | node_modules 6 | 7 | # builds 8 | build 9 | dist 10 | 11 | # misc 12 | .DS_Store 13 | ./.env 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | .rpt* 24 | coverage 25 | 26 | *.tgz 27 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [1.4.1](https://github.com/armand1m/react-with-firebase-auth/compare/v1.4.0...v1.4.1) (2022-04-05) 2 | 3 | 4 | ### Bug Fixes 5 | 6 | * **google-auth:** fix google auth provider instance type ([a2a3ca8](https://github.com/armand1m/react-with-firebase-auth/commit/a2a3ca8effcd72d100062ce81ffc8195fbfa33b9)) 7 | 8 | # [1.4.0](https://github.com/armand1m/react-with-firebase-auth/compare/v1.3.11...v1.4.0) (2022-02-20) 9 | 10 | 11 | ### Features 12 | 13 | * 🎸 include signInWithApple provider ([#131](https://github.com/armand1m/react-with-firebase-auth/issues/131)) ([bac510f](https://github.com/armand1m/react-with-firebase-auth/commit/bac510f6f2cac58aabb1b85f7e73a5355b9185a2)) 14 | 15 | ## [1.3.11](https://github.com/armand1m/react-with-firebase-auth/compare/v1.3.10...v1.3.11) (2021-07-04) 16 | 17 | 18 | ### Bug Fixes 19 | 20 | * semantic-release plugins order ([285b02c](https://github.com/armand1m/react-with-firebase-auth/commit/285b02ce4702fade5ad377d69e07067bde9edd1b)) 21 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at armando.mag95@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Armando Magalhães 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-with-firebase-auth 2 | 3 | [![NPM](https://img.shields.io/npm/v/react-with-firebase-auth.svg)](https://www.npmjs.com/package/react-with-firebase-auth) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) 4 | [![Build Status](https://travis-ci.org/armand1m/react-with-firebase-auth.svg?branch=master)](https://travis-ci.org/armand1m/react-with-firebase-auth) 5 | [![codecov](https://codecov.io/gh/armand1m/react-with-firebase-auth/branch/master/graph/badge.svg)](https://codecov.io/gh/armand1m/react-with-firebase-auth) 6 | [![bundlephobia](https://badgen.net/bundlephobia/min/react-with-firebase-auth)](https://bundlephobia.com/result?p=react-with-firebase-auth) 7 | [![bundlephobia](https://badgen.net/bundlephobia/minzip/react-with-firebase-auth)](https://bundlephobia.com/result?p=react-with-firebase-auth) 8 | [![devdependencies](https://badgen.net/david/dev/armand1m/react-with-firebase-auth)](https://david-dm.org/armand1m/react-with-firebase-auth?type=dev) 9 | [![peerdependencies](https://badgen.net/david/peer/armand1m/react-with-firebase-auth)](https://david-dm.org/armand1m/react-with-firebase-auth?type=peer) [![Greenkeeper badge](https://badges.greenkeeper.io/armand1m/react-with-firebase-auth.svg)](https://greenkeeper.io/) 10 | 11 | > Higher Order Component for integrating Firebase with a React Component 12 | 13 | This library makes a `withFirebaseAuth()` function available to you. 14 | 15 | - [Signature](#signature) 16 | - [Usage](#usage) 17 | - [Examples](#examples) 18 | - [Articles](#articles) 19 | - [License](#license) 20 | 21 | ## Signature 22 | 23 | ```ts 24 | type FirebaseAuthProps = { 25 | firebaseAppAuth: firebase.auth.Auth, 26 | providers?: { 27 | googleProvider?: firebase.auth.GoogleAuthProvider_Instance; 28 | facebookProvider?: firebase.auth.FacebookAuthProvider_Instance; 29 | twitterProvider?: firebase.auth.TwitterAuthProvider_Instance; 30 | githubProvider?: firebase.auth.GithubAuthProvider_Instance; 31 | } 32 | }; 33 | 34 | withFirebaseAuth

(authProps: FirebaseAuthProps) => 35 | createComponentWithAuth(WrappedComponent: React.ComponentType

) => 36 | React.ComponentType 37 | ``` 38 | 39 | ## Props Provided 40 | 41 | ```ts 42 | type WrappedComponentProps = { 43 | signInWithEmailAndPassword: (email: string, password: string) => void; 44 | createUserWithEmailAndPassword: (email: string, password: string) => void; 45 | signInWithGoogle: () => void; 46 | signInWithFacebook: () => void; 47 | signInWithGithub: () => void; 48 | signInWithTwitter: () => void; 49 | signInWithPhoneNumber: ( 50 | phoneNumber: string, 51 | applicationVerifier: firebase.auth.ApplicationVerifier, 52 | ) => void; 53 | signInAnonymously: () => void; 54 | signOut: () => void; 55 | setError: (error: string) => void; 56 | user?: firebase.User | null; 57 | error?: string; 58 | loading: boolean; 59 | }; 60 | ``` 61 | 62 | ## Usage 63 | 64 | Install it: 65 | 66 | ```bash 67 | npm install --save react-with-firebase-auth 68 | ``` 69 | 70 | Then use it in your components: 71 | 72 | ```tsx 73 | import * as React from 'react'; 74 | import * as firebase from 'firebase/app'; 75 | import 'firebase/auth'; 76 | 77 | import withFirebaseAuth, { WrappedComponentProps } from 'react-with-firebase-auth'; 78 | 79 | import firebaseConfig from './firebaseConfig'; 80 | 81 | const firebaseApp = firebase.initializeApp(firebaseConfig); 82 | 83 | const firebaseAppAuth = firebaseApp.auth(); 84 | 85 | /** See the signature above to find out the available providers */ 86 | const providers = { 87 | googleProvider: new firebase.auth.GoogleAuthProvider(), 88 | }; 89 | 90 | /** providers can be customised as per the Firebase documentation on auth providers **/ 91 | providers.googleProvider.setCustomParameters({ 92 | hd: 'mycompany.com', 93 | }); 94 | 95 | /** Create the FirebaseAuth component wrapper */ 96 | const createComponentWithAuth = withFirebaseAuth({ 97 | providers, 98 | firebaseAppAuth, 99 | }); 100 | 101 | const App = ({ 102 | /** These props are provided by withFirebaseAuth HOC */ 103 | signInWithEmailAndPassword, 104 | createUserWithEmailAndPassword, 105 | signInWithGoogle, 106 | signInWithFacebook, 107 | signInWithGithub, 108 | signInWithTwitter, 109 | signInAnonymously, 110 | signOut, 111 | setError, 112 | user, 113 | error, 114 | loading, 115 | }: WrappedComponentProps) => ( 116 | 117 | { 118 | user 119 | ?

Hello, {user.displayName}

120 | :

Log in

121 | } 122 | 123 | { 124 | user 125 | ? 126 | : 127 | } 128 | 129 | { 130 | loading &&

Loading..

131 | } 132 | 133 | ); 134 | 135 | /** Wrap it */ 136 | export default createComponentWithAuth(App); 137 | ``` 138 | 139 | ## Examples 140 | 141 | There are a few source code examples available: 142 | 143 | - Create React App Javascript Example: [armand1m/react-with-firebase-auth/tree/master/example](https://github.com/armand1m/react-with-firebase-auth/tree/master/example) 144 | - Create React App Medium Example: [armand1m/react-firebase-authentication-medium](https://github.com/armand1m/react-firebase-authentication-medium) 145 | 146 | You can also check a live demo example here: 147 | 148 | - https://armand1m.github.io/react-with-firebase-auth/ 149 | 150 | ## Articles 151 | 152 | - ["How to setup Firebase Authentication with React in 5 minutes (maybe 10)"](https://medium.com/firebase-developers/how-to-setup-firebase-authentication-with-react-in-5-minutes-maybe-10-bb8bb53e8834) 153 | 154 | ## Stargazers 155 | 156 | [![Stargazers over time](https://starchart.cc/armand1m/react-with-firebase-auth.svg)](https://starchart.cc/armand1m/react-with-firebase-auth) 157 | 158 | ## License 159 | 160 | MIT © [Armando Magalhaes](https://github.com/armand1m) 161 | -------------------------------------------------------------------------------- /example/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /example/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "jsxBracketSameLine": true, 3 | "printWidth": 70, 4 | "singleQuote": true, 5 | "trailingComma": "es5" 6 | } 7 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-with-firebase-auth-example-ts", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "@types/jest": "^26.0.15", 10 | "@types/node": "^12.0.0", 11 | "@types/react": "^17.0.0", 12 | "@types/react-dom": "^17.0.0", 13 | "firebase": "^8.7.0", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2", 16 | "react-scripts": "4.0.3", 17 | "react-with-firebase-auth": "file:..", 18 | "typescript": "^4.1.2", 19 | "web-vitals": "^1.0.1" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject", 26 | "lint": "prettier --check './src/**/*.{tsx,ts}'", 27 | "lint:fix": "prettier --write './src/**/*.{tsx,ts}'" 28 | }, 29 | "eslintConfig": { 30 | "extends": [ 31 | "react-app", 32 | "react-app/jest" 33 | ] 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | }, 47 | "devDependencies": { 48 | "@types/firebase": "^3.2.1", 49 | "prettier": "^2.3.2" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/armand1m/react-with-firebase-auth/bd3692139f1e136653b3bd5a6008de7a7e969b9f/example/public/favicon.ico -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | react-with-firebase-auth 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/armand1m/react-with-firebase-auth/bd3692139f1e136653b3bd5a6008de7a7e969b9f/example/public/logo192.png -------------------------------------------------------------------------------- /example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/armand1m/react-with-firebase-auth/bd3692139f1e136653b3bd5a6008de7a7e969b9f/example/public/logo512.png -------------------------------------------------------------------------------- /example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "react-with-firebase-auth", 3 | "name": "react-with-firebase-auth", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import firebase from 'firebase'; 3 | import withFirebaseAuth, { 4 | WrappedComponentProps, 5 | } from 'react-with-firebase-auth'; 6 | import firebaseConfig from './firebaseConfig'; 7 | import UserForm from './UserForm'; 8 | 9 | const firebaseApp = firebase.initializeApp(firebaseConfig); 10 | 11 | const FormWrapper: React.FC = ({ children }) => ( 12 | <> 13 |
{children}
14 |
15 | 16 | ); 17 | 18 | const Loading = () => ( 19 |
31 | Loading.. 32 |
33 | ); 34 | 35 | const App: React.FC = ({ 36 | user, 37 | error, 38 | loading, 39 | setError, 40 | signOut, 41 | signInAnonymously, 42 | signInWithEmailAndPassword, 43 | signInWithGoogle, 44 | signInWithGithub, 45 | signInWithApple, 46 | createUserWithEmailAndPassword, 47 | }) => ( 48 | 49 | {loading && } 50 | 51 | 52 |

react-with-firebase-auth

53 |

a very simple demo showing it in action

54 |

see user data and errors in the end of this page

55 | 56 | 57 | 58 |

create user

59 | 60 | 61 | 62 | 63 |

sign in

64 | 65 | 66 | 67 | 68 |

sign in with google

69 | 70 | 71 | 72 | 73 |

sign in with apple

74 | 75 | 76 | 77 | 78 |

sign in with github

79 |

(no provider setup, good to see error message)

80 | 81 | 82 | 83 | 84 |

sign in anonymously

85 |

(failing due to permissions, good to see error message)

86 | 87 | 88 | 89 | 90 |

sign out

91 | 92 | 93 | 94 | 95 |

clear error

96 | 97 | 98 | 99 | 100 |

user data

101 |