JSFiddle - React, Tailwind, and code Playground

by Umesh Patil

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Firebase Authentication</title>
  <script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>

<div id="app">
  <h1>Vue School - Firebase Authentication</h1>
  <div v-if="authUser">
    <h2>Signed in as {{authUser.email}}
      <img v-if="linkedGoogle" src="https://www.gstatic.com/mobilesdk/160512_mobilesdk/auth_service_google.svg" alt="">
      <img v-if="linkedPassword" src="https://www.gstatic.com/mobilesdk/160409_mobilesdk/images/auth_service_email.svg" alt="">
    </h2>
    <img :src="authUser.photoURL" height="150">
    <p>👩‍🍳 Hi, {{authUser.displayName || 'friend'}} we know you like {{authUser.favoriteFood || 'food'}}.</p>
    <button @click="signOut">Sign out</button>
    <button v-if="!linkedGoogle" @click="linkGoogle">Link Google Account</button>
    <button v-else @click="unlinkGoogle">Unlink Google Account</button>

    <form @submit.prevent="updateProfile">
      <h2>Update Profile</h2>
      <input v-model="displayName" placeholder="Your name">
      <input v-model="photoURL" placeholder="Your photo url">
      <button>Update</button>
    </form>

    <form @submit.prevent="updateCustomDetails">
      <h2>Update Additional Details</h2>
      <input v-model="favoriteFood" placeholder="Your favorite food">
      <button>Update</button>
    </form>

    <form @submit.prevent="updateEmail">
      <h2>Update Email</h2>
      <input v-model="email" placeholder="Your email">
      <button>Update</button>
    </form>

    <form @submit.prevent="updatePassword">
      <h2>Update Password</h2>
      <input type="password" v-model="newPassword" placeholder="Your password">
      <button>Update</button>
    </form>
  </div>

  <div v-else>
    <form @submit.prevent="register">
      <h2>Register</h2>
      <input type="email" v-model="email" placeholder="Type your email">
      <input type="password"...