Integrating Firebase Authentication with my web site

Google Workspace Developers Q&A
1

Hi there,

I implemented a DWG Viewer for Google Drive, with witch, user can right click on theire dwg file and open with this app. My app url: https://drive.thingraph.site/, it is hosted by github, not Firebase.

So, when my app is opened, my page need to ask user to login inorder to fetch file from drive. I don’t want (cannot) use the Google popup login panel (which work fine for me), so I want to use Firebase for authentication. It redirects to the login page then redirect back to my page, this logic works fine. My trouble is the getRedirectResult(auth) always return null although I think I should login successful!

I’ve configured https://console.firebase.google.com/. Authorized domains included localhost and drive.thingraph.site already.

Here is my code, can anyone help?

export async function getRedirectResultToken(): Promise<RedirectTokenPayload | null> {
  const auth = getFirebaseAuth()
  let result: UserCredential | null = await getRedirectResult(auth)
  if (!result) {
    // result should be null if this is not a redirect return.
    // It should not be null if this is a redirect return.
    console.log('getRedirectResultToken: no result')
    return Promise.resolve(null)
  }
  const credential = GoogleAuthProvider.credentialFromResult(result)
  if (!credential?.accessToken) {
    console.error('getRedirectResultToken: no access token')
    return Promise.resolve(null)
  }
  const expires_in = 3600
  return Promise.resolve({
    access_token: credential.accessToken,
    expires_in,
    scope: DRIVE_SCOPES.join(' '),
    token_type: 'Bearer'
  })
}

Thanks,
Yan

2 Likes
2

Hi @Yan_Zexuan If getRedirectResult(auth) always returns null, the most common causes are: the redirect flow is not completed on the same origin (must match exactly, including protocol and subdomain), getRedirectResult() is being called before Firebase finishes initialization, or signInWithRedirect() was not triggered in the same auth instance/session; also ensure you are not mixing popup and redirect methods, that third-party cookies are not blocked, and that you call getRedirectResult() immediately on page load after the redirect before any auth state resets.

2 Likes
3

Thank you very much aleinikov!

I checked carefully, probably not caused by these reasons! I use the same origin, either localhost or drive.thingraph.site. I’m sure Firebase is initialized. I’m not so sure but I believe signInWithRedirect() was triggered in the same auth instance/session. In my app, it is either popup or redirect, they cannot be mixed!

There could be something I don’t understand well!

I wrote a very simple page, its logic is simple, but still doesn’t work. And can be tested here https://drive.thingraph.site/test-redirect

<template>
  <div>
    <p>Calling getRedirectResult()...</p>
    <p id="resultToken"></p>
    <button @click="() => signInWithRedirectFlow(true)">Sign in with Redirect</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { getRedirectResultToken, signInWithRedirectFlow } from '../services/firebase-auth'

onMounted(async () => {
  const el = document.getElementById('resultToken')
  const payload = await getRedirectResultToken()
  el!.textContent = `resultToken: ${payload}`
})
</script>

All my code is here GitHub - thingraph/dwg-viewer-for-google-drive: A modern web application that integrates Google Drive with a powerful DWG viewer, allowing you to view DWG/DXF files directly from your Google Drive.

Any further help is appreciated!!