<script lang="ts" setup>
import {
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
} from "firebase/auth";

const tenantId = "TENANT_ID";
const auth = useFirebaseAuth()!;

// 👇 commenting out the block below helps testing the difference in behaviour 

if (auth) {
  auth.tenantId = tenantId;
}

const reg_state = reactive({
  email: "",
  password: "",
});

const reg_submit = async (e: Event) => {
  e.preventDefault();
  const user = await createUserWithEmailAndPassword(
    auth!,
    reg_state.email,
    reg_state.password
  );
  console.log(user);
};

const sign_in_state = reactive({
  email: "",
  password: "",
});

const sign_submit = async (e: Event) => {
  e.preventDefault();
  const user = await signInWithEmailAndPassword(
    auth!,
    sign_in_state.email,
    sign_in_state.password
  );
  console.log(user);
};
</script>

<template>
  <div>
    <fieldset>
      <legend>Register</legend>
      <form @submit="reg_submit">
        <label for="name">Email:</label><br />
        <input
          type="email"
          id="email"
          name="email"
          v-model="reg_state.email"
        /><br />
        <label for="pwd">Password:</label><br />
        <input
          type="password"
          id="pwd"
          name="pwd"
          v-model="reg_state.password"
        />
        <input type="submit" name="submit" />
      </form>
    </fieldset>

    <fieldset>
      <legend>Login</legend>

      <form @submit="sign_submit">
        <label for="name">Email:</label><br />
        <input
          type="email"
          id="email_sign_in"
          name="email"
          v-model="sign_in_state.email"
        /><br />
        <label for="pwd">Password:</label><br />
        <input
          type="password"
          id="pwd_sign_in"
          name="pwd"
          v-model="sign_in_state.password"
        />
        <input type="submit" name="submit" />
      </form>
    </fieldset>
  </div>
</template>

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    "nuxt-vuefire",
  ],
  vuefire: {
    config: {
      apiKey: process.env.NUXT_FIREBASE_API_KEY,
      authDomain: process.env.NUXT_FIREBASE_AUTH_DOMAIN,
      projectId: process.env.NUXT_FIREBASE_PROJECT_ID,
      storageBucket: process.env.NUXT_FIREBASE_STORAGE_BUCKET,
      appId: process.env.NUXT_FIREBASE_APP_ID,
    },
    auth: {
      enabled: true,
      sessionCookie: true,
    },
  },
});