Skip to content

Instantly share code, notes, and snippets.

@caviles

caviles/login.js

Created January 19, 2018 21:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save caviles/4c24768b5852395d820df48ac501f864 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save caviles/4c24768b5852395d820df48ac501f864 to your computer and use it in GitHub Desktop.
Download ZIP
Firebase Auth C# Clientside JS Login
Raw
login.js
var config = {
apiKey: "***",
authDomain: "***",
databaseURL: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***"
};
firebase.initializeApp(config);
/**
* Handles the sign in button press.
*/
/**
* Function called when clicking the Login/Logout button.
*/
// [START buttoncallback]
var isLoginPage = window.location.href.toLowerCase().indexOf("login")> -1;
var isForgotpw= window.location.href.toLowerCase().indexOf("forgotpw")> -1;
var isReg= window.location.href.toLowerCase().indexOf("register")> -1;
function toggleSignInGit() {
if (!firebase.auth().currentUser) {
// [START createprovider]
var provider = new firebase.auth.GithubAuthProvider();
// [END createprovider]
// [START addscopes]
provider.addScope('repo');
// [END addscopes]
// [START signin]
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a GitHub Access Token. You can use it to access the GitHub API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
// [START_EXCLUDE]
document.getElementById('quickstart-oauthtoken').textContent = token;
// [END_EXCLUDE]
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// [START_EXCLUDE]
if (errorCode === 'auth/account-exists-with-different-credential') {
alert('You have already signed up with a different auth provider for that email.');
// If you are using multiple auth providers on your app you should handle linking
// the user's accounts here.
} else {
console.error(error);
}
// [END_EXCLUDE]
});
// [END signin]
} else {
// [START signout]
firebase.auth().signOut();
// [END signout]
}
// [START_EXCLUDE]
document.getElementById('quickstart-sign-in-git').disabled = true;
// [END_EXCLUDE]
}
// [END buttoncallback]
/**
* Function called when clicking the Login/Logout button.
*/
// [START buttoncallback]
function toggleSignInTwitter() {
if (!firebase.auth().currentUser) {
// [START createprovider]
var provider = new firebase.auth.TwitterAuthProvider();
// [END createprovider]
// [START signin]
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a the Twitter OAuth 1.0 Access Token and Secret.
// You can use these server side with your app's credentials to access the Twitter API.
var token = result.credential.accessToken;
var secret = result.credential.secret;
// The signed-in user info.
var user = result.user;
// [START_EXCLUDE]
document.getElementById('quickstart-oauthtoken').textContent = token;
document.getElementById('quickstart-oauthsecret').textContent = secret;
// [END_EXCLUDE]
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// [START_EXCLUDE]
if (errorCode === 'auth/account-exists-with-different-credential') {
alert('You have already signed up with a different auth provider for that email.');
// If you are using multiple auth providers on your app you should handle linking
// the user's accounts here.
} else {
console.error(error);
}
// [END_EXCLUDE]
});
// [END signin]
} else {
// [START signout]
firebase.auth().signOut();
// [END signout]
}
// [START_EXCLUDE]
document.getElementById('quickstart-sign-twitter').disabled = true;
// [END_EXCLUDE]
}
// [END buttoncallback]
/**
* Function called when clicking the Login/Logout button.
*/
// [START buttoncallback]
function toggleSignInGoogle() {
if (!firebase.auth().currentUser) {
// [START createprovider]
var provider = new firebase.auth.GoogleAuthProvider();
// [END createprovider]
// [START addscopes]
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
// [END addscopes]
// [START signin]
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a Google Access Token. You can use it to access the Google API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
// [START_EXCLUDE]
document.getElementById('quickstart-oauthtoken').textContent = token;
// [END_EXCLUDE]
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// [START_EXCLUDE]
if (errorCode === 'auth/account-exists-with-different-credential') {
alert('You have already signed up with a different auth provider for that email.');
// If you are using multiple auth providers on your app you should handle linking
// the user's accounts here.
} else {
console.error(error);
}
// [END_EXCLUDE]
});
// [END signin]
} else {
// [START signout]
firebase.auth().signOut();
// [END signout]
}
// [START_EXCLUDE]
document.getElementById('quickstart-sign-in-google').disabled = true;
// [END_EXCLUDE]
}
function toggleSignInFB() {
if (!firebase.auth().currentUser) {
// [START createprovider]
var provider = new firebase.auth.FacebookAuthProvider();
// [END createprovider]
// [START addscopes]
provider.addScope('user_birthday');
// [END addscopes]
// [START signin]
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
// [START_EXCLUDE]
document.getElementById('quickstart-oauthtoken').textContent = token;
// [END_EXCLUDE]
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// [START_EXCLUDE]
if (errorCode === 'auth/account-exists-with-different-credential') {
alert('You have already signed up with a different auth provider for that email.');
// If you are using multiple auth providers on your app you should handle linking
// the user's accounts here.
} else {
console.error(error);
}
// [END_EXCLUDE]
});
// [END signin]
} else {
// [START signout]
firebase.auth().signOut();
// [END signout]
}
// [START_EXCLUDE]
document.getElementById('quickstart-sign-in-fb').disabled = true;
// [END_EXCLUDE]
}
// [END buttoncallback]
function toggleSignIn() {
if (firebase.auth().currentUser) {
// [START signout]
firebase.auth().signOut();
// [END signout]
} else {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (email.length < 4) {
alert('Please enter an email address.');
return;
}
if (password.length < 4) {
alert('Please enter a password.');
return;
}
// Sign in with email and pass.
// [START authwithemail]
firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
document.getElementById('quickstart-sign-in').disabled = false;
// [END_EXCLUDE]
});
// [END authwithemail]
}
document.getElementById('quickstart-sign-in').disabled = true;
}
/**
* Handles the sign up button press.
*/
function handleSignUp() {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (email.length < 4) {
alert('Please enter an email address.');
return;
}
if (password.length < 4) {
alert('Please enter a password.');
return;
}
// Sign in with email and pass.
// [START createwithemail]
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode == 'auth/weak-password') {
alert('The password is too weak.');
} else {
alert(errorMessage);
}
console.log(error);
// [END_EXCLUDE]
});
// [END createwithemail]
}
/**
* Sends an email verification to the user.
*/
function sendEmailVerification() {
// [START sendemailverification]
firebase.auth().currentUser.sendEmailVerification().then(function() {
// Email Verification sent!
// [START_EXCLUDE]
alert('Email Verification Sent!');
// [END_EXCLUDE]
});
// [END sendemailverification]
}
function sendPasswordReset() {
var email = document.getElementById('email').value;
// [START sendpasswordemail]
firebase.auth().sendPasswordResetEmail(email).then(function() {
// Password Reset Email Sent!
// [START_EXCLUDE]
alert('Password Reset Email Sent!');
// [END_EXCLUDE]
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode == 'auth/invalid-email') {
alert(errorMessage);
} else if (errorCode == 'auth/user-not-found') {
alert(errorMessage);
}
console.log(error);
// [END_EXCLUDE]
});
// [END sendpasswordemail];
}
function loginAPI(token) {
$.ajax({
url: "http://localhost:65518/home/Test/",
dataType: 'json',
type: 'GET',
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer " + token);
},
error: function (ex) {
console.log(ex.status + " - " + ex.statusText);
},
success: function (data) {
console.log(data);
return data;
}
});
}
/**
* initApp handles setting up UI event listeners and registering Firebase auth listeners:
* - firebase.auth().onAuthStateChanged: This listener is called when the user is signed in or
* out, and that is where we update the UI.
*/
function initApp() {
// Listening for auth state changes.
// [START authstatelistener]
firebase.auth().onAuthStateChanged(function(user) {
// [START_EXCLUDE silent]
var user = firebase.auth().currentUser;
// [END_EXCLUDE]
if (user) {
loginAPI(user.refreshToken);
// [END_EXCLUDE]
}
// [END_EXCLUDE]
});
// [END authstatelistener]
document.getElementById('quickstart-sign-in').addEventListener('click', toggleSignIn, false);
document.getElementById('quickstart-sign-in-fb').addEventListener('click', toggleSignInFB, false);
document.getElementById('quickstart-sign-in-google').addEventListener('click', toggleSignInGoogle, false);
document.getElementById('quickstart-sign-in-twitter').addEventListener('click', toggleSignInTwitter, false);
}
/**
* initApp handles setting up UI event listeners and registering Firebase auth listeners:
* - firebase.auth().onAuthStateChanged: This listener is called when the user is signed in or
* out, and that is where we update the UI.
*/
function initAppReg() {
// Listening for auth state changes.
// [START authstatelistener]
firebase.auth().onAuthStateChanged(function(user) {
// [START_EXCLUDE silent]
if(isForgotpw)
document.getElementById('quickstart-verify-email').disabled = true;
// [END_EXCLUDE]
if (user) {
window.location.href = "/dashboard";
// [END_EXCLUDE]
}
// [END_EXCLUDE]
});
// [END authstatelistener]
document.getElementById('quickstart-sign-in-fb').addEventListener('click', toggleSignInFB, false);
document.getElementById('quickstart-sign-in-google').addEventListener('click', toggleSignInGoogle, false);
document.getElementById('quickstart-sign-in-twitter').addEventListener('click', toggleSignInTwitter, false);
document.getElementById('quickstart-sign-up').addEventListener('click', handleSignUp, false);
}
function initAppForgotPw() {
// Listening for auth state changes.
// [START authstatelistener]
firebase.auth().onAuthStateChanged(function(user) {
// [START_EXCLUDE silent]
// [END_EXCLUDE]
if (user) {
window.location.href = "/dashboard";
// [END_EXCLUDE]
}
// [END_EXCLUDE]
});
// [END authstatelistener]
document.getElementById('quickstart-password-reset').addEventListener('click', sendPasswordReset, false);
}
window.onload = function() {
if(isLoginPage)
initApp();
if(isReg)
initAppReg();
if(isForgotpw)
initAppForgotPw();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment