client/api/auth.ts

@@ -1,14 +1,7 @@
-import {initializeApp} from 'firebase/app'
+import firebase from 'firebase'
-import {
+import 'firebase/auth'
-  getAuth,
-  onAuthStateChanged,
-  createUserWithEmailAndPassword,
-  signInWithEmailAndPassword,
-  GoogleAuthProvider,
-  signInWithPopup,
-} from 'firebase/auth'
 
-const app = initializeApp({
+const app = firebase.initializeApp({
   apiKey: "AIzaSyBICkyQIt-9lTsxHvRS1MOlZ-UdFVj8rsA",
   authDomain: "tomecraft-87ce5.firebaseapp.com",
   projectId: "tomecraft-87ce5",
@@ -17,11 +10,11 @@ const app = initializeApp({
   appId: "1:1021868917316:web:6c58534dd0ed491beab211",
 })
 
-const auth = getAuth(app)
+const auth = app.auth()
 
 // auto-login
 export function subscribeToAuthState(handleUser: (user: {uid: string; displayName: string} | null) => void) {
-  return onAuthStateChanged(auth, handleUser)
+  return auth.onAuthStateChanged(handleUser)
 }
 
 ///
@@ -29,11 +22,11 @@ export function subscribeToAuthState(handleUser: (user: {uid: string; displayNam
 ///
 
 export async function registerBasic(email: string, password: string) {
-  const user = await createUserWithEmailAndPassword(auth, email, password)
+  const user = await auth.createUserWithEmailAndPassword(email, password)
 }
 
 export async function loginBasic(email: string, password: string): Promise<string | null> {
-  const credentials = await signInWithEmailAndPassword(auth, email, password)
+  const credentials = await auth.signInWithEmailAndPassword(email, password)
   return credentials.user?.uid ?? null
 }
 
@@ -43,7 +36,7 @@ export async function loginBasic(email: string, password: string): Promise<strin
 
 export async function loginGoogle(): Promise<string> {
   // @ts-ignore deno does not recognize firebase.auth the way it is imported, but it exists
-  const provider = new GoogleAuthProvider(auth);
+  const provider = new firebase.auth.GoogleAuthProvider();
-  const {accessToken, credential, user} = await signInWithPopup(auth, provider)
+  const {accessToken, credential, user} = await auth.signInWithPopup(provider)
   return user.uid
 }

client/components/Page.tsx

@@ -14,7 +14,7 @@ export default function Page({children}: PageProps): JSX.Element {
           Tomecraft
         </h2>
         <a
-          href="https://github.com/snendev/tomecraft"
+          href="https://github.com/snendev/deno-react-web-starter"
           target="_blank"
         >
           <GithubIcon size={60} />

import_map.json

@@ -2,7 +2,9 @@
   "imports": {
     "~/": "./",
 
-    "firebase/": "https://cdn.skypack.dev/firebase@9.3.0/",
+    "firebase": "https://cdn.skypack.dev/firebase@8.7.0/app",
+    "firebase/auth": "https://cdn.skypack.dev/firebase@8.7.0/auth",
+    "firebase/firestore": "https://cdn.skypack.dev/firebase@8.7.0/firestore",
     "http": "https://deno.land/std@0.105.0/http/mod.ts",
     "media-types": "https://deno.land/x/media_types@v2.10.0/mod.ts",
     "oak": "https://deno.land/x/oak@v9.0.1/mod.ts",