Archive until 15 Jul 2021/React+firebase

This is all you need to set up working database in firebase

hajinny 2021. 1. 9. 19:25
import { useEffect, useState } from 'react';
import firebase from "firebase/app";
import Paper from '@material-ui/core/Paper';
import 'firebaseui/dist/firebaseui.css'

var firebaseui = require('firebaseui');
require("firebase/auth");
require("firebase/database");

var firebaseConfig = {
	//other stuff 
  databaseURL: //your database url,
};


var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      return true;
    },
    uiShown: function() {
      // document.getElementById('loader').style.display = 'none';
    }
  },
  signInFlow: 'popup',
  signInSuccessUrl: '/',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
  ],
  tosUrl: 'https://www.google.com',
  privacyPolicyUrl: 'https://www.google.com'
};

function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [photoUrl, setPhotoUrl] = useState("");

  useEffect(()=>{
    firebase.initializeApp(firebaseConfig);
    var ui = new firebaseui.auth.AuthUI(firebase.auth());
    ui.start('#firebaseui-auth-container', uiConfig);
    firebase.auth().onAuthStateChanged((user)=>{
      setEmail(user?user.email:"");
      setName(user?user.displayName:"");
      setPhotoUrl(user?user.setPhotoUrl:"");
      setLoggedIn(user?true:false);
    });
  },[]);
  
  function writeUserData() {
    firebase.database().ref('users/' + firebase.auth().currentUser.uid).set({
      username: name,
      email_address: email,

    });
  }

  return (
    <>
      <h1>Welcome to My Awesome App</h1>
      <Paper id="firebaseui-auth-container" />
      {loggedIn?<Paper>Hello! You are logged in as {name}!</Paper>:<Paper>You are not logged in, sorry!</Paper>}
      <button onClick={writeUserData}></button>
    </>
  );
}

export default App;

This will yield the following ui:

And the button at the very bottom will yield the following 

 

So cool!