Help! Typescript & Firebase = Property 'useAuth' is missing in RedwoodApolloProvider

Get Help and Help Others
1

I’m struggling thru Redwood 0.31 + Typescript + Firebase

Typescript is complaining at the RedwoodApolloProvider

Property ‘useAuth’ is missing in type ‘{ children: Element; }’ but required in type ‘{ graphQLClientConfig?: Omit<ApolloClientOptions, “cache”>; useAuth: () => AuthContextInterface; }’.

import { AuthProvider } from '@redwoodjs/auth'
import firebase from 'firebase/app'
import 'firebase/auth'
import { FatalErrorBoundary } from '@redwoodjs/web'
import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'

import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
import Routes from 'src/Routes'

import './index.css'

var firebaseClientConfig = {
  apiKey: "<omitted>",
  authDomain: "<omitted>.firebaseapp.com",
  projectId: "<omitted>",
  storageBucket: "<omitted>.appspot.com",
  messagingSenderId: "<omitted>",
  appId: "<omitted>",
  measurementId: "<omitted>"
};

const firebaseClient = ((config) => {
  firebase.initializeApp(config)
  return firebase
})(firebaseClientConfig)

const App = () => (
  <FatalErrorBoundary page={FatalErrorPage}>
    <AuthProvider client={firebaseClient} type="firebase">
      <RedwoodApolloProvider useAuth={firebaseClient}>
        <Routes />
      </RedwoodApolloProvider> // complaint is here
    </AuthProvider>
  </FatalErrorBoundary>
)

export default App
2

As with everything else in Redwood – the answer is easier then I thought…

The Generator & the Docs need updating on this point…

import { AuthProvider } from '@redwoodjs/auth'
import firebase from 'firebase/app'
import 'firebase/auth'
import { FatalErrorBoundary } from '@redwoodjs/web'
import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
import { useAuth } from '@redwoodjs/auth' // <<<<<<<<<<<<<<<<<<<<

import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
import Routes from 'src/Routes'

import './index.css'

var firebaseClientConfig = {
  apiKey: "<omitted>",
  authDomain: "<omitted>.firebaseapp.com",
  projectId: "<omitted>",
  storageBucket: "<omitted>.appspot.com",
  messagingSenderId: "<omitted>",
  appId: "<omitted>",
  measurementId: "<omitted>"
};

const firebaseClient = ((config) => {
  firebase.initializeApp(config)
  return firebase
})(firebaseClientConfig)

const App = () => (
  <FatalErrorBoundary page={FatalErrorPage}>
    <AuthProvider client={firebaseClient} type="firebase">
      <RedwoodApolloProvider useAuth={useAuth}> // <<<<<<<<<<<<<<<<<<<<
        <Routes />
      </RedwoodApolloProvider> 
    </AuthProvider>
  </FatalErrorBoundary>
)

export default App