Handle firebase-authentication callback without firebaseui-web (next-firebase-auth) - reactjs

Question

I have been dealing with a problem for several days and do not manage to solve it well.
I am using Firebase and NextJs in my current Project.
My current goal is to log in a user with firebase-authentication
.
However, it should also be possible to call the user in getServerSideProps and also to generate the IdToken within this.
The next-firebase-auth package makes life a lot easier. Basically, the package allows you to do just that.
When the user signs in, an endpoint '/api/login' is called to generate a refresh token and store the user info, ID token, and refresh token in cookies. Future requests to SSR pages receive the user info and ID token from cookies, refreshing the ID token as needed.
I am theoretically able to perform user.getIdToken() in getServerSideProps.
There is an example scenario within the repo, but which uses the
firebaseui-web. This enables you to make all the customizations you need.
Within this, inside the callback, signInSuccessWithAuthRes is set to false. And as I understand it, the key is here, as only then there is a redirection to '/api/login' to where the cookie is set.
However, I don't want to use the firebaseui-web as the UI looks bad.
I use the "normal way" of logging in my user with firebase.auth(), but I am not redirected to '/api/login'.
I tried to strive for the route myself, but always got an error
Error: The request is missing an Authorization header value
(I tried to set the Firebase IdToken as Bearer Authorization, but it did not work)
Is there a way to achieve this, without the firebaseui-web ?
My Approach
./pages/api/login
import { setAuthCookies } from 'next-firebase-auth'
import initAuth from '../../initAuth'
initAuth()
const handler = async (req, res) => {
try {
await setAuthCookies(req, res)
} catch (e) {
return res.status(500).json({ error: 'Unexpected error.' })
}
return res.status(200).json({ success: true })
}
export default handler
Part of my loginFuntion
const result = await firebase.auth().signInWithPopup(provider)
const token = await result.user.getIdToken(true)
await axios.post('/api/login', {
headers: {
Authorization: `Bearer ${token}`,
},
})
Example Code from next-firebase-auth GitHub Repo (FirebasAuth.js)
import React, { useEffect, useState } from 'react'
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'
import firebase from 'firebase/app'
import 'firebase/auth'
// Note that next-firebase-auth inits Firebase for us,
// so we don't need to.
const firebaseAuthConfig = {
signInFlow: 'popup',
// Auth providers
// https://github.com/firebase/firebaseui-web#configure-oauth-providers
signInOptions: [
{
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
requireDisplayName: false,
},
],
signInSuccessUrl: '/',
credentialHelper: 'none',
callbacks: {
// https://github.com/firebase/firebaseui-web#signinsuccesswithauthresultauthresult-redirecturl
signInSuccessWithAuthResult: () =>
// Don't automatically redirect. We handle redirects using
// `next-firebase-auth`.
**// Thats the Part I am not able to implement in my code !!!**
false,
},
}
const FirebaseAuth = () => {
// Do not SSR FirebaseUI, because it is not supported.
// https://github.com/firebase/firebaseui-web/issues/213
const [renderAuth, setRenderAuth] = useState(false)
useEffect(() => {
if (typeof window !== 'undefined') {
setRenderAuth(true)
}
}, [])
return (
<div>
{renderAuth ? (
<StyledFirebaseAuth
uiConfig={firebaseAuthConfig}
firebaseAuth={firebase.auth()}
/>
) : null}
</div>
)
}
export default FirebaseAuth
initAuth.js (if you need)
import { init } from 'next-firebase-auth'
const TWELVE_DAYS_IN_MS = 12 * 60 * 60 * 24 * 1000
const initAuth = () => {
init({
debug: true,
authPageURL: '/auth',
appPageURL: '/',
loginAPIEndpoint: '/api/login', // required
logoutAPIEndpoint: '/api/logout', // required
// firebaseAuthEmulatorHost: 'localhost:9099',
// Required in most cases.
firebaseAdminInitConfig: {
credential: {
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
// Using JSON to handle newline problems when storing the
// key as a secret in Vercel. See:
// https://github.com/vercel/vercel/issues/749#issuecomment-707515089
privateKey: process.env.FIREBASE_PRIVATE_KEY
? JSON.parse(process.env.FIREBASE_PRIVATE_KEY)
: undefined,
},
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
},
firebaseClientInitConfig: {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
},
cookies: {
name: 'ExampleApp',
keys: [
process.env.NEXT_COOKIE_SECRET_CURRENT,
process.env.NEXT_COOKIE_SECRET_PREVIOUS,
],
httpOnly: true,
maxAge: TWELVE_DAYS_IN_MS,
overwrite: true,
path: '/',
sameSite: 'strict',
secure: process.env.NEXT_PUBLIC_COOKIE_SECURE === 'true',
signed: true,
},
})
}