Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Authenticate on Firebase with phone number

Tags:

firebase

I have gone though the doc of Firebase, and it seems that we need to provide an email to authenticate a user.

However I rely on phone number.

Is there a way to do this ?

like image 786
Devous Avatar asked Apr 13 '15 15:04

Devous


2 Answers

Just came across this question.. you can just add your domain to the end of phone number and still make it a email. [email protected]. Make sure to add this for signup and login. This is what im doing. The only downside of this approachis that you can't use firebase's provided functionality to send password reset emails to users. You have to implement your own service service to provide that.

like image 97
Anish Avatar answered Sep 22 '22 04:09

Anish


Firebase is now supporting auth with Phone number: https://firebase.google.com/docs/auth/web/phone-auth

UPDATE: The link is for the official doku so pleas read there all instructions because.

I would recommend to use the firebaseui library that does all the auth UI stuff for you. Here is the web version: https://github.com/firebase/firebaseui-web There are also some for the Android and iOS projects.

Here is also a demo application you can use to start your own one: https://github.com/TarikHuber/react-most-wanted

It has also a running demo: https://www.react-most-wanted.com/ You can there try out all of the auth methods.

The actual implementation is pretty simple if you use the firebaseui. Here is mine in a React Component.

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {injectIntl} from 'react-intl';
import { Activity } from '../../components/Activity';
import muiThemeable from 'material-ui/styles/muiThemeable';
import { push } from 'react-router-redux';
import firebase from 'firebase';
import firebaseui from 'firebaseui';
import {firebaseAuth} from '../../utils/firebase';

var authUi = new firebaseui.auth.AuthUI(firebaseAuth);

class SignIn extends Component {

  componentDidMount() {
    const {router, browser}= this.props;

    const redirect =((router || {}).location || {}).search;

    var uiConfig = {
      signInSuccessUrl: redirect.slice(1),
      signInFlow: browser.greaterThan.medium?'popup':'redirect',
      callbacks: {
        signInSuccess: function(user, credentials, redirect) {

          push(redirect || '/');

          //To avoid page reload on single page applications
          return false;
        }
      },
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
        firebase.auth.GithubAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
      ]
    };

    authUi.start('#firebaseui-auth', uiConfig);
    
  }

  componentWillUnmount() {
    authUi.reset();
  }

  render(){

    const  {intl} = this.props;

    return (
      <Activity
        title={intl.formatMessage({id: 'sign_in'})}>
        <div style={{paddingTop: 35, width: '100%'}}>
          <div id="firebaseui-auth" style={{width: '100%'}}></div>
        </div>
      </Activity>
    );

  }

}


SignIn.propTypes = {
  push: PropTypes.func.isRequired,
  intl: PropTypes.object.isRequired,
  router: PropTypes.object.isRequired,
  muiTheme: PropTypes.object.isRequired,
};


const mapStateToProps = (state) => {
  const {router, browser } = state;
  return {
    router,
    browser
  };
};


export default connect(
  mapStateToProps,
  { push}
)(injectIntl(muiThemeable()(SignIn)));
like image 27
Tarik Huber Avatar answered Sep 21 '22 04:09

Tarik Huber