Comments (24)
I updated to v1.0.10, and it works beautifully guys! Thanks for the help. I deployed the updated version in case you want to see for yourselves. :)
from firebaseui-web-react.
Hey @MatthieuVeillon, I have not yet tried with signInFlow: 'redirect'
. In the example Using FirebaseAuth with a redirect I showing how to do a redirect after the sign-in flow is complete but you are right, the sign-in flow is still using popup.
Using signInFlow: 'redirect'
with a state change should still work. Would you have an example online where this doesn't work?
You could also use the firebase.auth().onAuthStateChanged
listener to check the auth state after the redirect. Actually, in general, it might be good to only draw the UI after the firebase auth state is ready. So wait for firebase.auth().onAuthStateChanged
to trigger once and then draw the app's UI.
from firebaseui-web-react.
You could also use the firebase.auth().onAuthStateChanged listener to check the auth state after the redirect. Actually, in general, it might be good to only draw the UI after the firebase auth state is ready. So wait for firebase.auth().onAuthStateChanged to trigger once and then draw the app's UI.
This is how I set things up. The <FirebaseAuth>
component is always rendered unless the user is signed in, as I expect it — as it’s kind of a black box — to handle whatever’s needed in order to log me in, be it listen for redirect tokens, auth state changes or anything else.
What’s missing here?
import React, { Component } from 'react'
import firebase from 'firebase'
import { FirebaseAuth } from 'react-firebaseui'
export default class SignIn extends Component {
state = {
signedIn: false
}
uiConfig = {
signInFlow: 'redirect',
signInOptions: [
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
{
provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
recaptchaParameters: {
type: 'image',
size: 'normal',
badge: 'bottomleft'
},
defaultCountry: 'NO'
}
],
callbacks: {
signInSuccess: this.onSignInSuccess
}
}
componentDidMount() {
this.props.auth.onAuthStateChanged(user => {
if(user)
this.onSignInSuccess()
})
}
onSignInSuccess = () => {
this.setState({ signedIn: true })
return false
}
render() {
if(!this.state.signedIn) {
return (
<div id="sign-in">
<h1>Please sign in to <strong>App</strong></h1>
<FirebaseAuth uiConfig={this.uiConfig} firebaseAuth={this.props.auth} />
</div>
)
}
return ''
}
}
from firebaseui-web-react.
Can you check that componentDidMount actually fires? and what about the auth state changed observer. Basically could you replace with:
componentDidMount() {
console.log('Component Mounted, starting to observe onAuthStateChanged');
this.props.auth.onAuthStateChanged(user => {
console.log('New signedIn state', !!user);
this.setState({ signedIn: !!user })
})
}
And see what gets logged?
from firebaseui-web-react.
I’m getting these on both page loads (before and after the redirect):
Component Mounted, starting to observe onAuthStateChanged
New signedIn state false
from firebaseui-web-react.
Strange...
Can you show me how you create the firebase app instance? this.props.auth
. just want to make sure it's not using a random app name for instance.
On a side note: as per my own testing popup auth actually works well in mobile browsers. You can try this app on a bunch of mobile devices for instance: https://www.friendly-pix.com
from firebaseui-web-react.
this.props.auth
is just the initialized Firebase app instance, passed in from the parent component (the React app itself).
Basically just
import Fire from '../fire'
const auth = Fire.auth()
// Then in render()
<SignIn auth={auth} />
from firebaseui-web-react.
I just wanted to make sure the app doesn't have a random name at initialization. For instance: firebase.initializeApp(config, randomAppName);
If the app name changes between page loads then things won't work properly between pages (Just checking, since it's unlikely that you are doing this anyhow).
from firebaseui-web-react.
Not passing in any app name, actually. It’s optional in the documentation, but does your implementation rely on it?
from firebaseui-web-react.
nope it's good that you are not :)
@bojeil-google do you have any idea? It's strange after the page redirects back the user is not signed-in...
@Haraldson by any chance would you be able to put this non-working example online somewhere? So we could try it out and experience the issue.
from firebaseui-web-react.
@nicolasgarnier The Facebook Login app isn’t public, I would have to manually add you as a tester to it. Send me your fbid/username if still interested.
from firebaseui-web-react.
Here it is: https://www.facebook.com/nivco
from firebaseui-web-react.
And the WIP app: <link removed>
from firebaseui-web-react.
Thanks @Haraldson.
@bojeil-google > After the redirect flow it looks like the user is signed in the temporary Firebase app instance created by firebaseUi, but not in the original app instance. For instance in the app pointed above:
auth.app.firebase_.app('nt-versus-firebaseui-temp').auth().currentUser
returns a user but
auth.currentUser
is null...
Looks like there is something wrong with the way the temporary app signs-users in the main app after the redirect in react. Not sure what it could be but maybe that rings a bell to you...
from firebaseui-web-react.
Not sure yet why this is happening as I can't test it. Can you add my Facebook account as a tester?
https://www.facebook.com/profile.php?id=100010123453643
from firebaseui-web-react.
@bojeil-google I added you now!
from firebaseui-web-react.
Ok, I think I have a theory:
t.prototype.componentDidMount = function() {
n(221);
var e = n(222);
this.firebaseUiWidget = e.auth.AuthUI.getInstance() || new e.auth.AuthUI(this.firebaseAuth),
this.firebaseUiWidget.reset(),
this.firebaseUiWidget.start("#" + this.elementId, this.uiConfig)
}
You are calling reset()
right after initialization, that is cancelling the previous pending operation. We cancel on reset because for single page apps, reset is used to cancel and restart sign in. So when the UI is shown again on the same page, it doesn't process a previous operation. When you instantiate a new instance, don't call reset immediately after. Call it only when already initialized.
from firebaseui-web-react.
I never call reset()
on anything, but maybe the built code does? If so, that’s all happening in the <FirebaseAuth>
component.
from firebaseui-web-react.
Yep that's done in <FirebaseAuth>
let me make an exception for the redirect flow...
I'll publish anew version so you can try it out asap.
from firebaseui-web-react.
@Haraldson can you try v1.0.10 ? :)
from firebaseui-web-react.
@bojeil-google if the reset()
was the culprit would the nt-versus-firebaseui-temp
app still have the signed-in user?
from firebaseui-web-react.
In this case, yes. When the FirebaseUI instance is initialized, the temp app is also initialized which initializes the Auth instance underneath. That is enough for it to complete the sign in with redirect. reset
does not signOut the user from that temp instance: https://github.com/firebase/firebaseui-web/blob/master/javascript/widgets/authui.js#L441
We could add logic to do so. The risks of dangling auth states are low since we use sessionStorage for that state, so the session will be lost when the window is closed.
from firebaseui-web-react.
I think we can signOut from the temp instance on reset. It's not a high priority but I think it is better to do so.
from firebaseui-web-react.
yay! Awesome thanks for checking @Haraldson
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.