Referring to a provided example on using firebase authentication with Next.js from the Next.js github, I have noticed that many projects I have studied incorporate createUserWithEmailAndPassword at some point. This function allows them to utilize user credentials for various purposes such as creating new documents in a 'users' collection within a firestore database. Both this stack answer and tutorial make reference to this method.
The example I am referring to, possibly utilizes firebase-ui - the authentication portion of my code appears as follows:
const firebaseAuthConfig = {
signInFlow: 'popup',
// Auth providers
// https://github.com/firebase/firebaseui-web#configure-oauth-providers
signInOptions: [
{
requireDisplayName: true,
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
},
],
signInSuccessUrl: '/',
credentialHelper: 'none',
callbacks: {
signInSuccessWithAuthResult: async ({ user }, redirectUrl) => {
const userData = mapUserData(user)
setUserCookie(userData)
},
},
}
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>
)
}
Is it possible to achieve the same result by utilizing the callbacks: {} feature during authentication? Is there an alternative approach to obtaining user credentials and passing them to a firestore collection in my application code rather than through a cloud function?
I have also observed that typically, the syntax used is
signInSuccessWithAuthResult: async(authResult) => {}signInSuccessWithAuthResult: async ({ user }, redirectUrl) => {}Could someone provide guidance on the best way forward?