{"id":15184494,"url":"https://github.com/just214/frothy","last_synced_at":"2026-04-09T16:35:49.777Z","repository":{"id":57242102,"uuid":"132378788","full_name":"just214/frothy","owner":"just214","description":"A customizable, drop-in login form for Firebase and React.","archived":true,"fork":false,"pushed_at":"2018-05-31T23:47:55.000Z","size":4132,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-17T04:25:33.989Z","etag":null,"topics":["authentication","facebook-login","firebase","github-oauth","google-login","login","login-forms","oauth","react","twitter-oauth"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/just214.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-06T21:51:34.000Z","updated_at":"2023-03-24T22:47:23.000Z","dependencies_parsed_at":"2022-09-04T20:14:06.029Z","dependency_job_id":null,"html_url":"https://github.com/just214/frothy","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just214%2Ffrothy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just214%2Ffrothy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just214%2Ffrothy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just214%2Ffrothy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/just214","download_url":"https://codeload.github.com/just214/frothy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246049641,"owners_count":20715512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","facebook-login","firebase","github-oauth","google-login","login","login-forms","oauth","react","twitter-oauth"],"created_at":"2024-09-27T17:02:14.085Z","updated_at":"2026-04-09T16:35:44.746Z","avatar_url":"https://github.com/just214.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![Logo](frothy_icon.png) Frothy\n\n## A customizable, drop-in login form for Firebase and React.\n\n[![npm version](https://badge.fury.io/js/frothy.svg)](https://badge.fury.io/js/frothy)\n[![Open Source Love](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)\n\n### [Interactive Demo](https://frothy-123.firebaseapp.com/)\n\n![Screenshot](screenshot.png)\n\n## Table of Contents\n\n[About](#about)  \n[Getting Started](#getting-started)  \n[Props](#props)  \n[Default Props](#default-props)  \n[Accessing User and Authentication State](#access-user)  \n[Design Decisions](#design-decisions)  \n[What's next?](#whats-next)  \n[Contributing](#contributing)\n\n\u003ca name=\"about\"/\u003e\n\n## About\n\nFrothy is a highly customizable, drop-in authentication form component built with [React](https://reactjs.org/), the [Firebase SDK](https://firebase.google.com/docs/database/web/start) and [Styled-Components](https://www.styled-components.com/). The library is approximately 104 KB minified and 25 KB gzipped.\n\n##### Frothy supports the following Firebase authentication features:\n\n* Login with Email/Password\n* Sign Up with Email/Password\n* Google Login\n* Facebook Login\n* Twitter Login\n* GitHub Login\n* Login with Phone Number (with Recaptcha)\n* Anonymous Login\n* Send Password Reset Link\n\n##### Here are just some of the features that Frothy provides:\n\n* Control over which Firebase authentication methods are included\n* Display as an inline form or a modal with a single prop setting\n* Plenty of styling configuration options\n* Recaptcha configuration options\n* Custom password rules\n* Smooth animations\n* No CSS imports required\n* WAI-ARIA compliant\n\n\u003e Please Read: This is a new project and has not been thoroughly tested. At the moment, it is not recommended to use this library in production apps. If you'd like to help get it there, your contributions would be greatly appreciated! Currently, this library is not compatible with React Native due to DOM dependencies. This may change in the future.\n\n\u003ca name=\"getting-started\"/\u003e\n\n## Getting Started\n\nIn order to use this component, it must be installed with npm along with the `firebase` and `styled-components` npm packages.\n\n`npm i frothy firebase styled-components` or `yarn add frothy firebase styled-components`\n\nFirebase must also be configured for your React project. This process is simple (and free). Here is a rough overview of the process:\n\nIn Firebase:\n\n* Create a (free) Firebase project at [https://firebase.google.com/](https://firebase.google.com/).\n\n- In the Firebase console, go to `Authentication \u003e SIGN-IN METHOD` and enable all of the sign-in providers that you are interested in supporting. Firebase will walk you through the necessary steps for each one.\n\nIn your React project:\n\nAdd your Firebase config to your main `index.js` file. You can find your config in the Firebase console at `Authentication \u003e WEB SETUP`\n\n```\nimport firebase from 'firebase';\n\nconst prodConfig = {\n  // apiKey: YOUR_API_KEY,\n  // authDomain: YOUR_AUTH_DOMAIN,\n  // databaseURL: YOUR_DATABASE_URL,\n  // projectId: YOUR_PROJECT_ID,\n  // storageBucket: '',\n  // messagingSenderId: YOUR_MESSAGING_SENDER_ID,\n};\n\nfirebase.initializeApp(config);\n```\n\nOnce Firebase is wired up, just import Frothy component and drop it into your app.\n\n```js\n// import it\nimport Frothy from 'frothy';\n\n// use it\n\u003cFrothy /\u003e;\n```\n\nPrefer a modal?\n\n```js\n\u003cFrothy modal /\u003e\n```\n\nBy default, Frothy takes care of grabbing the `firebase.auth` method and passing it to the components as long as you have the `firebase` npm package installed.\n\nHowever, it is possible to manually pass in the Firebase auth method, which allows you to use a production build of the Firebase SDK.\n\n```js\nimport 'firebase' from 'firebase/app';\nimport 'firebase/auth';\n\n\u003cFrothy auth={firebase.auth} /\u003e\n```\n\n\u003ca name=\"props\"/\u003e\n\n## Props\n\nOut of the box, a Frothy instance includes all of the supported Firebase features outlined above. However, a Frothy instance can be customized to include only the features that you want to support via props. The component will automatically reconfigure it's layout based on the features that you have chosen to implement. Several styling props and other custom configuration options are also exposed and documented below.\n\nHere is a list of all of the props that Frothy exposes:\n\n### auth\n\n`PropTypes.func`\n\nDefault Value: Firebase Development SDK\n\nDescription: Optionally pass in the firebase.auth method. By default, this library uses the development build of the Firebase SDK, which is not recommended for production.\n\n\u003e Be sure to check out the [Interactive Demo](https://frothy-123.firebaseapp.com/) where you can try out the majority of the available props.\n\n### modal\n\n`PropTypes.bool`\n\nDefault Value: `false`\n\nDescription: Optionally display as a modal. If true, the login form becomes a modal and provides a button to toggle the modal on and off. The button can be replaced with your own component.\n\n### modalButton\n\n`PropTypes.element`\n\nDefault Value: `\u003cButton\u003eSign In\u003c/Button\u003e`\n\nDescription: Accepts a React component instance. The toggle method will be automatically bound to the component that you provide.\n\n### modalOverlay\n\n`PropTypes.func`\n\nDefault Value: `true`\n\nDescription: Shows a background overlay when the modal is enabled and opened.\n\n### themeColor\n\n`PropTypes.string`\n\nDefault Value: `\"#2196F3\"`\n\nDescription: Sets the color of the tabs, buttons, and collapse menu titles.\n\n### showBorder\n\n`PropTypes.bool`\n\nDefault Value: `true`\n\nDescription: Shows or hides the outer box border.\n\n### rounded\n\n`PropTypes.oneOf([0, 1, 2, 3, 4, 5])`\n\nDefault Value: `1`\n\nDescription: Rounds the corners of the form. 0 = not rounded | 5 = most rounded\n\n### shadow\n\n`PropTypes.oneOf([0, 1, 2, 3, 4, 5])`\n\nDefault Value: `2`\n\nDescription: Applies a box shadow to the form. 0 = no shadow | 5 = thickest shadow\n\n### showLabels\n\n`PropTypes.bool`\n\nDefault Value: `false`\n\nDescription: Displays the provider name under the social icon buttons (i.e Google, Facebook).\n\n### title\n\n`PropTypes.oneOfType([PropTypes.string, PropTypes.element])`\n\nDefault Value: `\"Welcome to Frothy!\"`\n\nDescription: The main title at the top of the form. Accepts a component instance or a string.\n\n### titleColor\n\n`PropTypes.string`\n\nDefault Value: `\"#424242\"`\n\nDescription: The font color of the `title` prop.\n\n### titleBackgroundColor\n\n`PropTypes.string`\n\nDefault Value: `\"#ededed\"`\n\nDescription: The background color of the `title` area.\n\n### emailLogin\n\n`PropTypes.bool`\n\nDefault Value: `true`\n\nDescription: Enables and displays the email login form.\n\n### emailRemember\n\n`PropTypes.bool`\n\nDefault Value: `true`\n\nDescription: Enables the \"Remember me\" checkbox, which is persisted with `localStorage`.\n\n### emailSignup\n\n`PropTypes.bool`\n\nDefault Value: `true`\n\nDescription: Enables and displays the email sign up form.\n\n### passwordRules\n\n```js\nPropTypes.shape({\n  show: PropTypes.bool,\n  min: PropTypes.number,\n  max: PropTypes.number,\n  lowercase: PropTypes.number,\n  uppercase: PropTypes.number,\n  symbols: PropTypes.number,\n  numbers: PropTypes.number,\n});\n```\n\n#### show\n\nDefault Value: `true`\n\nDescription: Toggles the password requirements list at the bottom of the signup form.\n\n#### min\n\nDefault Value: `6`\n\nDescription: Sets the minimum number of required characters. The default value of `6` is based on Firebase default requirements.\n\n#### max\n\nDefault Value: `50`\n\nDescription: Sets the maximum number of required characters.\n\n#### lowercase\n\nDefault Value: `0`\n\nDescription: Sets the minimum number of required lower case alphabetic characters.\n\n#### uppercase\n\nDefault Value: `0`\n\nDescription: Sets the minimum number of required upper case alphabetic characters.\n\n#### symbols\n\nDefault Value: `0`\n\nDescription: Sets the minimum number of required special (symbol) characters.\n\n#### numbers\n\nDefault Value: `0`\n\nDescription: Sets the minimum number of required numbers.\n\n### agree\n\n`PropTypes.bool`\n\nDefault Value: `false`\n\nDescription: Toggles a checkbox for the user to agree to terms in the sign up form.\n\n### agreeMessage\n\n`PropTypes.oneOfType([PropTypes.string, PropTypes.element])`\n\nDefault Value: `\"I agree to the terms of service.\"`\n\nDescription: The text that appears next to the `agree` checkbox. Accepts a React component instance or a string. The React component instance allows you to pass in a link to the terms or privacy policy that the user is agreeing to.\n\n### passwordReset\n\n`PropTypes.bool`\n\nDefault Value: `true`\n\nDescription: Enables and displays the password reset form (collapse).\n\n### phone\n\n`PropTypes.bool`\n\nDefault Value: `true`\n\nDescription: Enables and displays the phone login form (collapse).\n\n### recaptcha\n\n`PropTypes.oneOf(['normal', 'invisible'])`\n\nDefault Value: `\"invisible\"`\n\nDescription: The phone login form includes Recaptcha. This prop allows you to set the recaptcha to either be invisible or normal (show the \"Not a Robot\" button inline). If invisible, a badge will show up in the place of the button.\n\n### recaptchaBadge\n\n`PropTypes.oneOf(['inline', 'bottomright', 'bottomleft'])`\n\nDefault Value: `\"inline\"`\n\nDescription: Recaptcha requires that the user be notified if invisible Recaptcha is enabled. This prop allows you to display the badge that Recaptcha provides either inline in the form or in the bottom corners of the page.\n\n### anonymous\n\n`PropTypes.bool`\n\nDefault Value: `true`\n\nDescription: Enables and displays the anonymous login button.\n\n### google\n\n`PropTypes.bool`\n\nDefault Value: `true`\n\nDescription: Enables Google login and enables the social login button.\n\n### facebook\n\n`PropTypes.bool`\n\nDefault Value: `true`\n\nDescription: Enables Facebook login and enables the social login button.\n\n### twitter\n\n`PropTypes.bool`\n\nDefault Value: `true`\n\nDescription: Enables Twitter login and enables the social login button.\n\n### github\n\n`PropTypes.bool`\n\nDefault Value: `true`\n\nDescription: Enables Github login and enables the social login button.\n\n\u003ca name=\"default-props\"/\u003e\n\n## Default Props\n\nHere is a Frothy instance with all of the available props set to their default values. In other words, the examples below is the same as just using `\u003cFrothy /\u003e`.\n\n```js\nimport Frothy from 'frothy';\nimport firebase from 'firebase';\nimport { Button } from './common';\n\n\u003cFrothy\n  auth={firebase.auth}\n  modal={false}\n  modalButton={\u003cButton\u003eSign In\u003c/Button\u003e}\n  modalOverlay={true}\n  themeColor=\"#2196F3\"\n  showBorder={true}\n  rounded={1}\n  shadow={2}\n  showLabels={true}\n  title={'Welcome to Frothy!'}\n  titleColor=\"#424242\"\n  titleBackgroundColor=\"#ededed\"\n  emailLogin={true}\n  emailRemember={true}\n  emailSignup={true}\n  passwordRules={{\n    show: true,\n    min: 6,\n    max: 50,\n    lowercase: 0,\n    uppercase: 0,\n    symbols: 0,\n    numbers: 0,\n  }}\n  agree={false}\n  agreeMessage=\"I agree to the terms of service.\"\n  passwordReset={true}\n  phone={true}\n  recaptcha={'invisible'}\n  recaptchaBadge=\"inline\"\n  anonymous={true}\n  google={true}\n  facebook={true}\n  twitter={true}\n  github={true}\n/\u003e;\n```\n\n\u003ca name=\"access-user\"/\u003e\n\n## Accessing User and Authentication State\n\nFirebase offers a couple convenient methods to access the user and authentication state:\n\nAuthentication State Observer (recommended)\n\n```js\nimport firebase from 'firebase';\n\nfirebase.auth().onAuthStateChanged(function(user) {\n  if (user) {\n    // User is signed in.\n  } else {\n    // No user is signed in.\n  }\n});\n```\n\n`currentUser` property\n\n```js\nimport firebase from 'firebase';\n\nconst user = firebase.auth().currentUser;\n\nif (user) {\n  // User is signed in.\n} else {\n  // No user is signed in.\n}\n```\n\nThe Frothy [demo](https://frothy-123.firebaseapp.com/) utilizes the Authentication State Observer to control access to routes based on authentication status. Feel free to dig into the demo's source code to see how this works.\n\n\u003ca name=\"design-decision\"/\u003e\n\n## Design Decisions\n\nThis library aims to strike a nice balance between plenty of configuration options and simplicity in getting started.\n\nAfter initially writing all of the styles with inline JavaScript, it was decided to refactor the project to use `styled-components`. The `styled-components` library is not included as a dependency due to the conflicts associated with having two installations in the same project. Instead, it is a required peer dependency that will need to be imported along with `firebase`. `styled-components` includes vendor prefixing, which allows this package to be supported by more browsers. It also injects the styles directly into the document, which means that you do not need to require any additional CSS files.\n\n\u003ca name=\"whats-next\"/\u003e\n\n## What's Next?\n\n* Tests\n* Token management?\n* Recaptcha support for signup form?\n* Custom error config\n* React Native support?\n\n\u003ca name=\"contributing\"/\u003e\n\n## Contributing\n\nIf you would like to contribute, that would be awesome! If you'd like to write some Jest tests, that would be the best!\n\nHere is how to get started on your own development server.\n\nFrothy\n\n* `git clone git@github.com:gojutin/frothy.git`\n* `cd frothy`\n* `yarn`\n* `yarn start`\n* `yarn run build` runs a production build\n\nFrothy Demo\n\n* `cd docs`\n* `yarn`\n* `yarn start`\n* visit `localhost:3000` in your browser\n* `yarn run build` runs a production build\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjust214%2Ffrothy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjust214%2Ffrothy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjust214%2Ffrothy/lists"}