Can't use AuthCheck component or useUser hook

[RodyGL]

Version info

React: 0.0.0-experimental-241c4467e

Firebase: 7.8.2

ReactFire: 2.0.0-rc.0

Test case

You may need to download the project because stackblitz won't run the new version of reactfire.
https://stackblitz.com/edit/react-d3ik8r?file=index.js

Steps to reproduce

Use the AuthCheck component or useUser hook (haven't use the other components/hooks)

Expected behavior

No error

Actual behavior

I get a TypeError: Cannot read property '_getService' of undefined

[ralcar]

Same here, this is my

function App() {
  return (
    <Suspense fallback="Loading...">
      <AuthCheck fallback={<SignIn />}>
        <HomePage />
      </AuthCheck>
    </Suspense>
  );
}

function HomePage() {
  const user = useUser();

  return <h1>Welcome back {user.displayName}</h1>;
}

And this is my index.js wrapping

ReactDOM.render(
  <Router>
    <AppContextProvider>
      <ThemeProvider theme={defaultTheme}>
        <FirebaseAppProvider firebaseConfig={firebaseConfig} initPerformance>
          <App />
        </FirebaseAppProvider>
      </ThemeProvider>
    </AppContextProvider>
  </Router>,
  document.getElementById('root'),
);

[davepwsmith]

Closing my off-topic issue in favour of this one - notes copy and pasted:

In particular, AuthCheck now has some sort of type-error:

TypeError: this is undefinedfirebaseNamespaceCore.ts:219
    componentName firebaseNamespaceCore.ts:219
    useUser index.js:13
    AuthCheck index.js:46
    React 10
        renderWithHooks
        mountIndeterminateComponent
        beginWork$1
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        beginWork$$1
        performUnitOfWork
        workLoopConcurrent
        performConcurrentWorkOnRoot
    performConcurrentWorkOnRoot self-hosted:920
    React 3
        workLoop
        flushWork
        performWorkUntilDeadline

The above error occurred in the <AuthCheck> component:
    in AuthCheck (at router.tsx:52)
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (at router.tsx:51)
    in Suspense (at router.tsx:50)
    in Suspense (at router.tsx:48)
    in AppRouter (at App.tsx:24)
    in Suspense (at App.tsx:22)
    in FirebaseAppProvider (at App.tsx:21)
    in StrictMode (at App.tsx:20)
    in App (at src/index.tsx:21)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Update:

AuthCheck works if you pass in the auth parameter manually. I have tried to follow this through the stack trace, console-logging everything I can find - but to no avail. It looks like the useAuth()() call in useUser no longer ends up returning anything (in time?) and the thing just hangs up after that:

export function useUser<T = unknown>(
  auth?: auth.Auth,
  options?: ReactFireOptions<T>
): User | T {
  console.log("before: ",auth)
  const authHook = useAuth();
  console.log("useUser:useAuth: ", authHook)
  const authFunc = authHook()
  console.log("useUser:authFunc: ", authFunc)
  auth = authFunc
  console.log("after: ",auth)
  const currentUser = auth.currentUser || options?.startWithValue;
  console.log("useUser:currentUser: ", currentUser)
  return useObservable(user(auth), `auth:user:${auth.app.name}`, currentUser);
}

Console Logs

before:  undefined index.js:13
useUser:useAuth:  
function componentName()
index.js:15
before:  undefined index.js:13
useUser:useAuth:  
function componentName()
index.js:15
before:  undefined index.js:13
useUser:useAuth:  
function componentName()
index.js:15
before:  undefined index.js:13
useUser:useAuth:  
function componentName()

[jamesdaniels]

Thanks for the report, I'll look into this for rc.1

[jamesdaniels]

Addressed in 2.0.0-rc.1 thanks again for your help testing.

[camilovegag]

Same here, this is my

function App() {
  return (
    <Suspense fallback="Loading...">
      <AuthCheck fallback={<SignIn />}>
        <HomePage />
      </AuthCheck>
    </Suspense>
  );
}

function HomePage() {
  const user = useUser();

  return <h1>Welcome back {user.displayName}</h1>;
}

And this is my index.js wrapping

ReactDOM.render(
  <Router>
    <AppContextProvider>
      <ThemeProvider theme={defaultTheme}>
        <FirebaseAppProvider firebaseConfig={firebaseConfig} initPerformance>
          <App />
        </FirebaseAppProvider>
      </ThemeProvider>
    </AppContextProvider>
  </Router>,
  document.getElementById('root'),
);

Hey! did you manage to solve this issue? Im having the same one right now

[aaronksaunders]

I believe fallback property is a component not a string

On Mon, Aug 3, 2020 at 8:51 PM Camilo Vega ***@***.***> wrote: Same here, this is my function App() { return ( <Suspense fallback="Loading..."> <AuthCheck fallback={<SignIn />}> <HomePage /> </AuthCheck> </Suspense> ); } function HomePage() { const user = useUser(); return <h1>Welcome back {user.displayName}</h1>; } And this is my index.js wrapping ReactDOM.render( <Router> <AppContextProvider> <ThemeProvider theme={defaultTheme}> <FirebaseAppProvider firebaseConfig={firebaseConfig} initPerformance> <App /> </FirebaseAppProvider> </ThemeProvider> </AppContextProvider> </Router>, document.getElementById('root'), ); Hey! did you manage to solve this issue? Im having the same one right now — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#213 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEAFGOFCQFI43RC2T6TZITR65LS5ANCNFSM4KU6MOGA> .

--

…

-- Aaron K. Saunders CEO Clearly Innovative Inc - Luma Lab - In3 aaron@clearlyinnovative.com www.clearlyinnovative.com www.In3DC.com This email message and any attachment(s) are for the sole use of the intended recipient(s) and may contain proprietary and/or confidential information which may be privileged or otherwise protected from disclosure. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient(s), please contact the sender by reply email and destroy the original message and any copies of the message as well as any attachment(s) to the original message.

[camilovegag]

I believe fallback property is a component not a string

On Mon, Aug 3, 2020 at 8:51 PM Camilo Vega notifications@github.com wrote:

Same here, this is my

function App() {
return (

<AuthCheck fallback={}>



);
}

function HomePage() {
const user = useUser();

return

Welcome back {user.displayName}

;
}

And this is my index.js wrapping

ReactDOM.render(








,
document.getElementById('root'),
);

Hey! did you manage to solve this issue? Im having the same one right now

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#213 (comment),
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAEAFGOFCQFI43RC2T6TZITR65LS5ANCNFSM4KU6MOGA
.

--

--

Aaron K. Saunders
CEO Clearly Innovative Inc - Luma Lab - In3
aaron@clearlyinnovative.com
www.clearlyinnovative.com
www.In3DC.com

This email message and any attachment(s) are for the sole use of the
intended recipient(s) and may contain proprietary and/or confidential
information which may be privileged or otherwise protected from disclosure.
Any unauthorized review, use, disclosure or distribution is prohibited. If
you are not the intended recipient(s), please contact the sender by reply
email and destroy the original message and any copies of the message as
well as any attachment(s) to the original message.

You can uses both, I managed to solve this by putting a ternary operator which determine if a user has been logged. That seems odd cause I think already does it but now my log in with user from useUser(); works!