Comments (29)
I too was having this problem. I removed the <React.StrictMode> from index.js and the issue was resolved.
from firebaseui-web-react.
Removing StrictMode was the only thing that has worked for me... would rather not have to do that though.
from firebaseui-web-react.
I'm getting a similar issue -- if you have more than one instance of the component, something (the component?) deletes the inner children DOM nodes of the other instances. Of note, the component uses the id
label, so if you have more than one instance of the component you're overloading the id
(in this case, 'firebaseui_container'). Not a solution, but perhaps helpful for finding one.
from firebaseui-web-react.
Hi, I solved the issue by adding something like :
import React, { useState, useEffect } from "react";
import firebase from "../utils/firebase/firebase";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
const uiConfig = {
signInSuccessUrl: "/",
signInOptions: [firebase.auth.EmailAuthProvider.PROVIDER_ID]
}
export default function Home() {
const [widget, setWidget] = useState(null);
useEffect(() => {
setWidget(<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />)
}, [])
return (
<div>
{widget}
</div>
);
}
from firebaseui-web-react.
This problem is still very much present.
from firebaseui-web-react.
With Nextjs and create-next-app
it worked by changing:
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false, // changed from true to false
swcMinify: true,
}
module.exports = nextConfig
from firebaseui-web-react.
The problem still persists, only removing strict mode works.
from firebaseui-web-react.
I removed the <React.StrictMode> from index.js and the issue was resolved.
from firebaseui-web-react.
Exactly the same bahaviour as nebrelbug (OP). I still cannnot figure out what is wrong.
I get message "Error: AuthUI instance is deleted!" even with first load of login page. But login renders and works fine. After redirect there is no component at all.
from firebaseui-web-react.
I'm getting a similar issue -- if you have more than one instance of the component, something (the component?) deletes the inner children DOM nodes of the other instances. Of note, the component uses the
id
label, so if you have more than one instance of the component you're overloading theid
(in this case, 'firebaseui_container'). Not a solution, but perhaps helpful for finding one.
Same here. I had this error when there was more than one instance of the component rendered on the screen. The error went away as I removed the duplicate component.
from firebaseui-web-react.
For anyone coming in late 2023, an easy workaround is shown in this firebase issue.
Basically, create your own StyledFirebaseAuth component (from source in the linked issue) and get rid of react-firebaseui. The firebaseui package is required instead.
from firebaseui-web-react.
I just checked my web app without the '/connect' page, and it works fine, with no slowdown. I'm pretty sure the problem has to do with firebaseui-web-react
.
I also got this error when using the example with state:
Warning: Canβt call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
from firebaseui-web-react.
@nicolasgarnier is there any possibility you could look into this? I'm stuck in the middle of a project because I can't get auth set up :)
from firebaseui-web-react.
π
This is also occurring for me. Fresh load of page gives me
Error: AuthUI instance is deleted!
at Db (../node_modules/firebaseui/dist/npm.js:408:435)
at ab (../node_modules/firebaseui/dist/npm.js:407:496)
at dm (../node_modules/firebaseui/dist/npm.js:350:357)
at jm (../node_modules/firebaseui/dist/npm.js:351:214)
at Jn (../node_modules/firebaseui/dist/npm.js:404:219)
at start (../node_modules/firebaseui/dist/npm.js:403:387)
at Of (../node_modules/firebaseui/dist/npm.js:180:251)
at If (../node_modules/firebaseui/dist/npm.js:181:264)
at Jf (../node_modules/firebaseui/dist/npm.js:178:54)
from firebaseui-web-react.
@estill01 @daviddudas99 were you able to find any solutions?
from firebaseui-web-react.
@nebrelbug no I don't have a final solution. I have workaround for my web app. First login works just fine. Login, logout and than login again is the issue. So after each log out I reload whole page. Not elegant but it works fine.
from firebaseui-web-react.
I was able to get around this by moving my uiConfig to the top App component, and dispatching it to state.
const App = () => {
const [state, dispatch] = useImmerReducer(scoutDataReducer, initialState);
const uiConfig = {
signInFlow: 'popup',
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID
],
};
useEffect(() => {
dispatch({ type: 'config', config: uiConfig });
}, []);
Then I set a conditional on the StyledFirebaseAuth component to render if there is a config.
import React from 'react';
import firebase from 'firebase/app';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import 'firebase/auth';
const SignInContainerA = props => {
const { config } = props;
return (
<>
{config && <StyledFirebaseAuth uiConfig={config} firebaseAuth={firebase.auth()} />}
</>
);
};
export default SignInContainerA;
Not sure if helpful, but worked for me. Initially had the uiConfig directly in the SignInContainerA component and was getting the same error.
from firebaseui-web-react.
+1
from firebaseui-web-react.
Hm, maybe we can solve this by using a ref instead of a static id
.
from firebaseui-web-react.
@jhuleatt Any progress on this? I am having this issue in version 5.0.2
from firebaseui-web-react.
Having this issue too
from firebaseui-web-react.
Any other solution other than removing StrictMode?
from firebaseui-web-react.
I think there is specifically an issue with it in React 18. I have gotten AuthUI to work on React 17 with no issues; but once the project is upgraded to react 18 this error occurs if strict mode is enabled. The react team did mention that 18 could cause some apps to break given strict mode got more strict this patch.
from firebaseui-web-react.
looks like we might have a fix here
#173
hopefully it gets reviewed/merged soon
from firebaseui-web-react.
I suggest that the id of the auth ui be generated with useId or any other random thing, that will allow multiple UIs in a single page.
from firebaseui-web-react.
don't know if this will cause any other issues but this works for me meanwhile:
const ui = new firebaseui.auth.AuthUI(firebase.auth());
function App(props) {
useEffect(() => {
const oldDelete = ui.delete
ui.delete = () => {
}
return () => {
ui.delete = oldDelete
}
})
// .... some other code
return (
<FirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
)
}
from firebaseui-web-react.
I too was having this problem. I removed the <React.StrictMode> from index.js and the issue was resolved.
thank, thanks actually works for me.
I was upgrading nextjs to 13.1, react 18 and got this error and removing the strict from the next.config was the only thing that fixed it
from firebaseui-web-react.
Still issue for me, removing strict mode fixed it as a workaround for now
"next": "12.3.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-firebaseui": "^6.0.0",
from firebaseui-web-react.
suffering this one too
from firebaseui-web-react.
Related Issues (20)
- One tap login not working HOT 7
- /example/README.md doesn't mention creating an app first HOT 2
- Firebase-config.json is not created! HOT 1
- Support React 18 HOT 6
- Error when using PhoneAuthProvider - Uncaught TypeError: app.auth is not a function HOT 8
- React 18 StrictMode causes "AuthUI instance is deleted" error HOT 4
- StyledFirebaseAuth does not render with firebase ^9.8.1 HOT 3
- Question: how to get a refresh token
- Cannot Install in React 18.2 HOT 5
- Styledfirebaseui don't know my initializaion HOT 2
- StyledFirebaseAuth not working with nextjs HOT 8
- `StyledFirebaseAuth` cannot be used as a JSX component HOT 1
- AnonymousAuthProvider signInOptions does not work; Throw a TypeError.
- React strict mode compatibility HOT 1
- [email protected] is not compatible with [email protected] HOT 11
- Is this project maintained? HOT 7
- Is there a builtin rate-limiter or CAPTCHA in this?
- How do I add a custom domain redirect to this auth? HOT 1
- Link with Multiple Accounts is not working
- Third-party cookie will be blocked in future Chrome versions as part of Privacy Sandbox.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from firebaseui-web-react.