Keep getting "Unable to process request due to missing initial state." #8467
Description
Operating System
MacOS 14.5 (23F79)
Environment (if applicable)
Chrome and Safari
Firebase SDK Version
10.13.1 (but also my previous version)
Firebase SDK Product(s)
Auth
Project Tooling
React app
Detailed Problem Description
I used Firebaseui before for authentication with Google. Two weeks everything was working. However, today i tested again and it broke. I reduced this to a minimal app and no errors are logged.. After some debugging, i get the following in one of the links the authentication redirects me to:
Unable to process request due to missing initial state. This may happen if browser sessionStorage is inaccessible or accidentally cleared. Some specific scenarios are - 1) Using IDP-Initiated SAML SSO. 2) Using signInWithRedirect in a storage-partitioned browser environment.
I checked, double checked the configs and i tried in different browsers and incognito mode. All out of ideas here..
Not sure if related, but in the network logs, i see the init.json request has failed as well. (Request URL:
https://jointly-lp2.firebaseapp.com/__/firebase/init.json
Request Method:
GET
Status Code:
404 Not Found)
Steps and code to reproduce issue
import React from 'react';
import { getAuth, signInWithRedirect, getRedirectResult, GoogleAuthProvider } from 'firebase/auth';
import { initializeApp } from "firebase/app";
const App = () => {
// Import the functions you need from the SDKs you need
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyBT2-Ehmc2TLfToSKCCfzpVenHwKg_R_gU",
authDomain: "jointly-lp.firebaseapp.com",
projectId: "jointly-lp",
storageBucket: "jointly-lp.appspot.com",
messagingSenderId: "274980191481",
appId: "1:274980191481:web:5b64d713bc8075fe01b628",
measurementId: "G-MTCEMGHMQY"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();
const provider = new GoogleAuthProvider();
// Function to handle Google sign-in
const handleSignIn = async () => {
try {
// Initiate the sign-in process with redirect
await signInWithRedirect(auth, provider);
} catch (error) {
console.error("Error during sign-in:", error);
}
};
// Check for sign-in result after redirect
React.useEffect(() => {
const fetchUser = async () => {
try {
const result = await getRedirectResult(auth);
if (result) {
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
const user = result.user;
// Handle the signed-in user information
console.log("User:", user);
console.log("Token:", token);
}
} catch (error) {
console.error("Error fetching redirect result:", error);
}
};
fetchUser();
}, [auth]);
return (
<div className="App">
<button onClick={handleSignIn}>Sign In with Google</button>
</div>
);
};
export default App;