【初心者向け】素のJavascriptとFIREBASEでToDoリストにログイン認証を実装する

<!-- ログイン/サインアップエリア -->
<div id="auth" class="card">
  <h2 id="auth-title">ログイン</h2>
  <button id="auth-btn">ログイン</button>
  <button id="switch-btn">サインアップ</button><br><br>
  <div class="auth-box">
    <label for="email">メールアドレス</label>
    <input type="email"  id="email" placeholder="example@example.com"/>
    <label for="password">パスワード</label>
    <input type="password" id="password" placeholder="・・・・・・"/>
  </div><br><br>
</div>

/* ユーザ認証機能 */
.hidden{
  display: none;
}
.auth-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.auth-box input{
  margin-top: 15px;
}
.auth-box label{
  width: 35%;
  margin-top: 15px;
}
#switch-btn{
  background-color: white;
  color: #333;
}
#switch-btn:hover{
  background-color: #d8d8d8;
  color: #333;
}

// ユーザ認証==============
//=========================
//=========================
// ログイン機能追加
const $create = document.querySelector('#create')  //リスト追加エリア
const $auth = document.querySelector('#auth')  //ログインエリア
const $authTitle = document.querySelector('#auth-title')  //ログインエリアタイトル
const $email = document.querySelector('#email')  //emailインプット
const $password = document.querySelector('#password')  //passwordインプットボックス
const $authBtn = document.querySelector('#auth-btn')  //認証イベントボタン  
const $switchBtn = document.querySelector('#switch-btn')  //切替ボタン
let token;  //認証後のtokenを格納する


// サインアップとログインの切り替えイベント
$switchBtn.addEventListener('click',()=>{
  if($switchBtn.innerHTML=='サインアップ'){
    $authTitle.innerHTML='サインアップ'
    $authBtn.innerHTML='サインアップ'
    $switchBtn.innerHTML='ログイン'
  }else{
    $authTitle.innerHTML='ログイン'
    $authBtn.innerHTML='ログイン'
    $switchBtn.innerHTML='サインアップ'
  }
})

// FIREBASEへの接続URL設定と認証メソッドを実行する
$authBtn.addEventListener('click',()=>{
  let url ='https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyB0WZn0qhjc8V1Q17vxCJtdF0kcpEeU364';
  if($authBtn.innerHTML=='サインアップ'){
    url='https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyB0WZn0qhjc8V1Q17vxCJtdF0kcpEeU364'
  }
  auth(url);  //URLを引数に認証メソッドを実行する
})

// 認証メソッド
async function auth(url){
  const response = await fetch(url,{
    method:'POST',
    body:JSON.stringify({
    email:$email.value.trim(),
    password:$password.value.trim()
  })
});
  const responseData = await response.json()  //戻り値をJSONへ変換
  token=responseData.idToken; //token変数にFIREBASEからのtokenを代入
  if(!response.ok){
    alert('認証に失敗しました')
    return;
  }
  alert('認証に成功しました')
  //hiddenクラスで各エリアの表示・非表示切替
  $auth.classList.add('hidden')
  $create.classList.remove('hidden')
  $btnDelete.classList.remove('hidden')
}

// HTML要素取得
const $create = document.querySelector('#create')  //リスト追加エリア
const $auth = document.querySelector('#auth')  //ログインエリア
const $authTitle = document.querySelector('#auth-title')  //ログインエリアタイトル
const $email = document.querySelector('#email')  //emailインプット
const $password = document.querySelector('#password')  //passwordインプットボックス
const $authBtn = document.querySelector('#auth-btn')  //認証イベントボタン  
const $switchBtn = document.querySelector('#switch-btn')  //切替ボタン
let token;  //認証後のtokenを格納する

// サインアップとログインの切り替えイベント
$switchBtn.addEventListener('click',()=>{
  if($switchBtn.innerHTML=='サインアップ'){
    $authTitle.innerHTML='サインアップ'
    $authBtn.innerHTML='サインアップ'
    $switchBtn.innerHTML='ログイン'
  }else{
    $authTitle.innerHTML='ログイン'
    $authBtn.innerHTML='ログイン'
    $switchBtn.innerHTML='サインアップ'
  }
})

// FIREBASEへの接続URL設定と認証メソッドを実行する
$authBtn.addEventListener('click',()=>{
  let url ='https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=ご自身のAPIキー';
  if($authBtn.innerHTML=='サインアップ'){
    url='https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=ご自身のAPIキー'
  }
  auth(url);  //URLを引数に認証メソッドを実行する
})

// 認証メソッド
async function auth(url){
  const response = await fetch(url,{
    method:'POST',
    body:JSON.stringify({
    email:$email.value.trim(),
    password:$password.value.trim()
  })
});
  const responseData = await response.json()  //戻り値をJSONへ変換
  token=responseData.idToken; //token変数にFIREBASEからのtokenを代入
  if(!response.ok){
    alert('認証に失敗しました')
    return;
  }
  alert('認証に成功しました')
  //hiddenクラスで各エリアの表示・非表示切替
  $auth.classList.add('hidden')
  $create.classList.remove('hidden')
  $btnDelete.classList.remove('hidden')
}

// ★★todoの新規作成処理
async function createData() {
  // バリデーション
  if($newData.value.trim()==''){
    alert('TODO登録データが入力されていません。')
    return;
  }
  // フェッチ通信でFIREBASEへPOSTする
  await fetch(
    "https://ご自身のFIREBASEのURL/todo.json?auth="+token,//FIREBASEのURL+階層名+.json
    {
      method: "POST",
      headers: {"Content-Type": "application/json",},
      body: JSON.stringify({todo: $newData.value}),  //入力値をJSONへ変換する
    }
);
  $newData.value="";  //インプットボックスを空欄
  getData()  //getDataメソッドでリストアイテムを最新化する
}