import { render } from 'solid-js/web'
import { FirebaseProvider } from 'solid-firebase'
import App from './App'

const firebaseConfig = {...}

render(
  () => (
    <FirebaseProvider config={config}>
      <App />
    </FirebaseProvider>
  ),
  document.getElementById('root') as HTMLElement,
)

import { Switch, Match } from 'solid-js'
import { GoogleAuthProvider, getAuth, signInWithPopup } from 'firebase/auth'
import { useAuth } from 'solid-firebase'

const Login = () => {
  const auth = getAuth()
  const signIn = () => signInWithPopup(auth, new GoogleAuthProvider())

  return <button onClick={signIn}>Sign In with Google</button>
}

const App = () => {
  const auth = getAuth()
  const state = useAuth(auth)

  return (
    <Switch fallback={<User data={state.data} />}>
      <Match when={state.loading}>
        <div>Loading...</div>
      </Match>
      <Match when={state.error}>
        <Login />
      </Match>
    </Switch>
  )
}

import { Match, Switch } from 'solid-js'
import { collection, getFirestore } from 'firebase/firestore'
import { useFirestore } from 'solid-firebase'

const App = () => {
  const db = getFirestore()
  const todos = useFirestore(collection(db, 'todos'))

  // or for doc reference
  const todo = useFirestore(doc(db, 'todos', 'todo-id'))

  return (
    <Switch fallback={<TodoList data={todos.data}>}>
      <Match when={todos.loading}>
        <div>Loading...</div>
      </Match>
      <Match when={todos.error}>
        <div>An error occurred.</div>
      </Match>
    </Switch>
  )
}