When I press the github login button, it login the user but it doesn’t log the data to the console.
import React, { useState,useContext } from 'react'
import { createContext } from 'react';
import { useEffect } from 'react';
import {auth} from '../config/fbConfig'
const AuthContext = createContext();
export const useAuth = () => {
return useContext(AuthContext);
}
export const AuthProvider = ({children}) => {
const [currentUser, setCurrentUser] = useState();
const [loading, setLoading] = useState(true);
const provider = new auth.GithubAuthProvider();
// provider.addScope('user');
const githubSignIn = () => {
// return auth().signInWithRedirect(provider);
auth().signInWithRedirect(provider)
.then(function(result) {
console.log(result.additionalUserInfo.username);
console.log(result.additionalUserInfo.profile);
})
.catch(function(error) {
// Some error occurred.
console.log(error)
});
}
const githubSignOut = () => {
return auth().signOut();
}
useEffect(() => {
const unsubscribe = auth().onAuthStateChanged(user => {
// setCurrentUser(user);
setLoading(false);
})
return unsubscribe
}, [])
const value = {
currentUser,
githubSignIn,
githubSignOut
}
return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
)
}
Sky020
October 19, 2020, 11:03am
2
Welcome, rishipurwar.
Looking at the docs: https://firebase.google.com/docs/auth/web/google-signin
It appears signInWithRedirect does not return a promise. Ie. you cannot access the result from it.
You need to use getRedirectResult to, well, get the result .
Hope this helps
1 Like
miku86
October 19, 2020, 12:05pm
3
Hey there,
nice to meet you!
The docs say Returns Promise<void>.
The solution is also shown:
Authenticates a Firebase client using a full-page redirect flow. To handle the results and errors for this operation, refer to firebase.auth.Auth.getRedirectResult .
Edit: Ooops, I didn’t see the previous post
@miku86 @Sky020 I tried to apply what you said but still, I can’t see any result on the console.
import React, { useState,useContext } from 'react'
import { createContext } from 'react';
import { useEffect } from 'react';
import {auth} from '../config/fbConfig'
const AuthContext = createContext();
export const useAuth = () => {
return useContext(AuthContext);
}
export const AuthProvider = ({children}) => {
const [currentUser, setCurrentUser] = useState();
const [loading, setLoading] = useState(true);
const githubSignIn = () => {
const provider = new auth.GithubAuthProvider();
auth().signInWithRedirect(provider)
auth().getRedirectResult().then(function(result) {
// The firebase.User instance:
var user = result.user;
console.log(user)
// setCurrentUser(user);
}, function(error) {
var email = error.email;
if (error.code === 'auth/account-exists-with-different-credential') {
auth.fetchSignInMethodsForEmail(email).then(function(providers) {
});
}
});
}
const githubSignOut = () => {
return auth().signOut();
}
useEffect(() => {
const unsubscribe = auth().onAuthStateChanged(user => {
// setCurrentUser(user);
setLoading(false);
})
return unsubscribe
}, [])
const value = {
currentUser,
githubSignIn,
githubSignOut
}
return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
)
}
Sky020
October 19, 2020, 12:56pm
5
Seems like you need to combine what I and @miku86 said.
I am not sure what you are seeing, but I would guess the issue is this:
Then, you can also retrieve the GitHub provider’s OAuth token by calling getRedirectResult when your page loads :
You need to only use the getRedirectResult method, once the page has loaded/redirected.
How I get to know page has loaded/redirected so that I call getRedirectResult.
useEffect(() => {
const unsubscribe = auth().onAuthStateChanged(user => {
// setCurrentUser(user);
setLoading(false);
})
return unsubscribe
}, [])
Please make changes to the above code. So, I clearly understand what you said.
Sky020
October 19, 2020, 1:07pm
7
To be honest, I am just not editing your code, because I do not want to lead you down the wrong path.
What I think you need to do is:
onClick -> Fire signInWithRedirect function
A new page should be opened, allowing credentials to be filled in
Upon successful authentication, the page will redirect:
Only once the page has redirected, the getRedirectResult should be used.
Essentially, I think you have having a concurrency issue.
Once the authState changes, call the getRedirectResult method.
I did this now
useEffect(() => {
const unsubscribe = auth().onAuthStateChanged(user => {
auth().getRedirectResult().then(function(result) {
// The firebase.User instance:
var users = result;
if(users.user !== null) {
console.log(users)
setCurrentUser(users.user);
}
//setCurrentUser(users);
}, function(error) {
var email = error.email;
console.log(error)
if (error.code === 'auth/account-exists-with-different-credential') {
auth.fetchSignInMethodsForEmail(email).then(function(providers) {
});
}
});
setLoading(false);
})
return unsubscribe
}, [])
It’s kind of working I am getting the data to the console but every time I need to sign in to get the data.
