Closed RastaDjuss closed 6 years ago
bojeil-google
commented
7 years ago It would be helpful if you provide links to your site or code snippets. I can only speculate. Are you setting up an onAuthStateChanged listener on that page to detect whether to render the sign in widget or not?
jalajc
commented
7 years ago @RastaDuss, please share some snippets and specifics.
Buddy-Press (, wordpress or any major Content platform) have their own login system. Therefore you would also need to figure out details on how B uddy-Press login works and how external authentication services can be integrated. --> you need to complete this login flow if not already done.
On Thu, Feb 9, 2017 at 11:53 AM, bojeil-google notifications@github.com wrote:
It would be helpful if you provide links to your site or code snippets. I can only speculate. Are you setting up an onAuthStateChanged listener on that page to detect whether to render the sign in widget or not?
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/firebase/firebaseui-web/issues/103#issuecomment-278557966, or mute the thread https://github.com/notifications/unsubscribe-auth/ANKmvoktqhChjmp84k9A39s56ZbzvMlPks5rarDqgaJpZM4L7ttr .
RastaDjuss
commented
7 years ago i just installed or copied the snippet given for my account:
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>
that i added to :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample FirebaseUI App</title>
<!-- *******************************************************************************************
* TODO(DEVELOPER): Paste the initialization snippet from:
* Firebase Console > Overview > Add Firebase to your web app. *
***************************************************************************************** -->
<script src="https://cdn.firebase.com/libs/firebaseui/1.0.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/1.0.0/firebaseui.css" />
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
signInSuccessUrl: '<url-to-redirect-to-on-success>',
signInOptions: [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
// Terms of service url.
tosUrl: '<your-tos-url>'
};
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
</script>
</head>
<body>
<!-- The surrounding HTML is left untouched by FirebaseUI.
Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
</body>
</html>
wher it says todo developper. on a second try i changer the signInOptions: [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
// Terms of service url.
tosUrl: '<your-tos-url>'
};
for:
ui.start('#firebaseui-auth-container', {
signInOptions = [
{
provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
scopes: [
'https://www.googleapis.com/auth/plus.login'
]
},
{
provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
scopes: [
'public_profile',
'email',
'user_likes',
'user_friends'
]
},
firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter does not support scopes.
firebase.auth.EmailAuthProvider.PROVIDER_ID // Other providers don't need to be given as object.
]
});
<https://github.com/firebase/FirebaseUI-Web#sign-in-flows>
that i just added to the header before any link elements like google analytics auth. I added the codes as is inside <html> </html> provided.
Then I copied the firebaseui-web-master files to my root website directory and had to guess that I had to rename it firebaseui-web only for it to work. I could not run npm install firebaseui --save
within the firebasui-web directory as it wouldn’t install onto itself. one of the commands in onne of the multiple pages not the first i read gave this git command: git clone that then runs a cd to firebaseui-web (that how i figured out how to name the folder and i kinda guessed i hat to put it in the root folder i’m not even sure it is used). The rnp command doesn’t work from within the firebseui-web forlder that already has node_modules folder in it like the one npm install firebaseui --save
installs. There is this script i don’t know what to do with:Here is how you would track the Auth state across all your pages:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample FirebaseUI App</title>
<!-- *******************************************************************************************
* TODO(DEVELOPER): Paste the initialization snippet from:
* Firebase Console > Overview > Add Firebase to your web app. *
***************************************************************************************** -->
<script type="text/javascript">
initApp = function() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var uid = user.uid;
var providerData = user.providerData;
user.getToken().then(function(accessToken) {
document.getElementById('sign-in-status').textContent = 'Signed in';
document.getElementById('sign-in').textContent = 'Sign out';
document.getElementById('account-details').textContent = JSON.stringify({
displayName: displayName,
email: email,
emailVerified: emailVerified,
photoURL: photoURL,
uid: uid,
accessToken: accessToken,
providerData: providerData
}, null, ' ');
});
} else {
// User is signed out.
document.getElementById('sign-in-status').textContent = 'Signed out';
document.getElementById('sign-in').textContent = 'Sign in';
document.getElementById('account-details').textContent = 'null';
}
}, function(error) {
console.log(error);
});
};
window.addEventListener('load', function() {
initApp()
});
</script>
</head>
<body>
<h1>Welcome to My Awesome App</h1>
<div id="sign-in-status"></div>
<div id="sign-in"></div>
<div id="account-details"></div>
</body>
</html>
If you exclude the codes above except the firebase snippet with my keys in it i also tried with this one alone:
Example with all parameters used
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample FirebaseUI App</title>
<!-- *******************************************************************************************
* TODO(DEVELOPER): Paste the initialization snippet from:
* Firebase Console > Overview > Add Firebase to your web app. *
***************************************************************************************** -->
<script src="https://cdn.firebase.com/libs/firebaseui/1.0.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/1.0.0/firebaseui.css" />
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
callbacks: {
signInSuccess: function(currentUser, credential, redirectUrl) {
// Do something.
// Return type determines whether we continue the redirect automatically
// or whether we leave that to developer to handle.
return true;
},
uiShown: function() {
// The widget is rendered.
// Hide the loader.
document.getElementById('loader').style.display = 'none';
}
},
credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM,
// Query parameter name for mode.
queryParameterForWidgetMode: 'mode',
// Query parameter name for sign in success url.
queryParameterForSignInSuccessUrl: 'signInSuccessUrl',
// Will use popup for IDP Providers sign-in flow instead of the default, redirect.
signInFlow: 'popup',
signInSuccessUrl: '<url-to-redirect-to-on-success>',
signInOptions: [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
// Terms of service url.
tosUrl: '<your-tos-url>'
};
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
</script>
</head>
<body>
<!-- The surrounding HTML is left untouched by FirebaseUI.
Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>
</body>
</html>adding my firebase snippet to the TODO developpers section. The buttons appear in the header of my site and auth works cause when i look at firebase account the users are there the website juste doesn’t aknowledge there loged in and verified.
L e 9 févr. 2017 à 02:20, JC notifications@github.com a écrit :
@RastaDuss, please share some snippets and specifics.
Buddy-Press (, wordpress or any major Content platform) have their own login system. Therefore you would also need to figure out details on how B uddy-Press login works and how external authentication services can be integrated. --> you need to complete this login flow if not already done.
On Thu, Feb 9, 2017 at 11:53 AM, bojeil-google notifications@github.com wrote:
It would be helpful if you provide links to your site or code snippets. I can only speculate. Are you setting up an onAuthStateChanged listener on that page to detect whether to render the sign in widget or not?
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/firebase/firebaseui-web/issues/103#issuecomment-278557966, or mute the thread https://github.com/notifications/unsubscribe-auth/ANKmvoktqhChjmp84k9A39s56ZbzvMlPks5rarDqgaJpZM4L7ttr .
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/firebase/firebaseui-web/issues/103#issuecomment-278565888, or mute the thread https://github.com/notifications/unsubscribe-auth/AYKDHjtrGYHE-DRB_wHfNyoFOB1xna60ks5rar40gaJpZM4L7ttr.
RastaDjuss
commented
7 years ago I also tried this one to git clone https://github.com/firebase/firebaseui-web.git cd firebaseui-web npm install from within the firebase-web-master directory
Le 9 févr. 2017 à 02:20, JC notifications@github.com a écrit :
@RastaDuss, please share some snippets and specifics.
Buddy-Press (, wordpress or any major Content platform) have their own login system. Therefore you would also need to figure out details on how B uddy-Press login works and how external authentication services can be integrated. --> you need to complete this login flow if not already done.
On Thu, Feb 9, 2017 at 11:53 AM, bojeil-google notifications@github.com wrote:
It would be helpful if you provide links to your site or code snippets. I can only speculate. Are you setting up an onAuthStateChanged listener on that page to detect whether to render the sign in widget or not?
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/firebase/firebaseui-web/issues/103#issuecomment-278557966, or mute the thread https://github.com/notifications/unsubscribe-auth/ANKmvoktqhChjmp84k9A39s56ZbzvMlPks5rarDqgaJpZM4L7ttr .
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/firebase/firebaseui-web/issues/103#issuecomment-278565888, or mute the thread https://github.com/notifications/unsubscribe-auth/AYKDHjtrGYHE-DRB_wHfNyoFOB1xna60ks5rar40gaJpZM4L7ttr.
bojeil-google
commented
7 years ago Did you specify a signInSuccessUrl (your sign in success ulr page)? If so, is it the same domain as the page where you rendered the firebaseui widget on? On that page, you have to add an onAuthStateChanged listener to detect the new Auth state.
RastaDjuss
commented
7 years ago I don't know wich sign in success url to write, I tryed with the auth redirect url given to facebook and twitter and i tryed home page. Yes i tryed te redirect to same page as html snippet in the header of my website before all scripts. Where do i find onAuthStateChanged parsmeters or code snippet? Le jeu. 9 févr. 2017 à 18:56, bojeil-google notifications@github.com a écrit :
Did you specify a signInSuccessUrl (your sign in success ulr page)? If so, is it the same domain as the page where you rendered the firebaseui widget on? On that page, you have to add an onAuthStateChanged listener to detect the new Auth state.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/firebase/firebaseui-web/issues/103#issuecomment-278815335, or mute the thread https://github.com/notifications/unsubscribe-auth/AYKDHtXmfCYELGParWtiXBSjX8MTcPsXks5ra6eVgaJpZM4L7ttr .
-- À l'ultimo, bonne continuité :) Site web: www.tattoocalypso.com Page facebook: www.facebook.com/tattoocalypso pour chatter tattoos... tel: 581-888-8299
RastaDjuss
commented
7 years ago this is what you give rfor authstatechange: <!DOCTYPE html>
where do I copy this one?If the rest of the script is in my head before scripts?
Le 9 févr. 2017 à 18:56, bojeil-google notifications@github.com a écrit :
onAuthStateChanged listener
bojeil-google
commented
7 years ago sign in success url should be the page you end up on after you successful sign in. It is a page you own. The last code snippet you supplied with the onAuthStateChanged listener could be your sign in success url page. try that. make sure it is the same domain as the page where you render the firebaseui widget.
RastaDjuss
commented
7 years ago that snippet adds a bunch of code in the pageso i just add it to a page and redirect there and the website will understand there loger in? Since my buttons code snippet is in the head of my web site but they appear when im logged in if i log out the butytons for auth don’t show. My site doesn’t have a mandatory auth its only for the forum participation and buddypress. I don’t think my header is an appropriate spot for the first code that has the buttons for auth. When we login the website send us to /wp-login.php i tryed adding the code in there so it only appeared on login. I think ill just take a plugin the facebook one works well with your auth url.
Le 10 févr. 2017 à 13:11, bojeil-google notifications@github.com a écrit :
sign in success url should be the page you end up on after you successful sign in. It is a page you own. The last code snippet you supplied with the onAuthStateChanged listener could be your sign in success url page. try that. make sure it is the same domain as the page where you render the firebaseui widget.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/firebase/firebaseui-web/issues/103#issuecomment-279021140, or mute the thread https://github.com/notifications/unsubscribe-auth/AYKDHlbqcLCljych8Z5mOslubfjPFPv-ks5rbKhLgaJpZM4L7ttr.
bojeil-google
commented
7 years ago I am sorry but I am having a hard time understanding this.
nicolasgarnier
commented
6 years ago Closing for inactivity. If you are still facing the issue please feel free to reply and give:
after auth with the same url using facebook auth plugin with your auth urls and my sum world account the auth works and logs us in so the auth configuration on firebase should be ok. Its working with the plugin. I add your code snippets to the head of my wedsite the one from the read me on this download that says example using all the parameters. and i add my portion af the code snippet. It all works the buttons appear in the header and the auth works but when redirected the menues don't change to concidere the user is loged in the site doesn't seem to know the user is logged in. How do i configure it I'm using buddy press and MikMag theme on a normal website https.