I was trying to build a web page with Google sign In authentication integrated on it. I have my index.html and my app.js file that is always called whenever the login is successful. I keep getting this Uncaught syntax errors for reasons I don't know and can anyone help me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="Front-End for Bootstrap Tutorial" />
<meta name="author" content="CSE 216 Student Name Goes Here" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Super Deuper Epic App</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script src="https://apis.google.com/js/client:platform.js?onload=start" async defer>
</script>
<script>
function start() {
gapi.load('auth2', function() {
auth2 = gapi.auth2.init({
client_id: '937584788497-tpt2bujc0dbi8g3a8808b1ssc83c1657.apps.googleusercontent.com',
fetch_basic_profile: false,
scope: 'profile'
});
});
}
</script>
<script src="jquery.min.js"></script>
<script src="handlebars.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="templates.js"></script>
<!-- <script src="app.js"></script> -->
<link href="https://fonts.googleapis.com/css?family=Fresca" rel="stylesheet">
<link rel="stylesheet" href="app.css" />
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="my-signin2"></div>
<button id="sign-out" onclick="signOut()">Sign Out</button>
<script>
function renderButton() {
gapi.signin2.render('my-signin2', {
'scope': 'profile email',
'width': 240,
'height': 40,
'longtitle': true,
'theme': 'dark',
});
$('#sign-out').attr('style', 'display: none');
}
$('#my-signin2').click(function() {
// signInCallback defined in step 6.
auth2.grantOfflineAccess().then(signInCallback);
});
</script>
<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
<script>
var script = document.createElement('script');
script.src = 'app.js';
function signOut(){
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function(){
$('#my-signin2').attr('style', 'display: block');
$('#sign-out').attr('style', 'display: none');
history.go(-1);
console.log('User logged out');
})
}
function signInCallback(authResult) {
if (authResult['code']) {
// Hide the sign-in button now that the user is authorized, for example:
$('#my-signin2').attr('style', 'display: none');
// Send the code to the server
$.ajax({
type: 'POST',
url: 'https://super-deuper-epic-app.herokuapp.com/',
// Always include an `X-Requested-With` header in every AJAX request,
// to protect against CSRF attacks.
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
contentType: 'application/octet-stream; charset=utf-8',
success: function(result) {
console.log("Result is:" + result);
document.body.appendChild(script);
$('#sign-out').attr('style', 'display: block');
// Handle or verify the server response.
},
processData: false,
data: authResult['code']
});
} else {
console.log("Error");
// There was an error.
}
}
</script>
</body>
</html>
The weirdest part is it used to work, like fullly with the sign in integrated in it and sign out and everything, but the next day, when I run it without changing the code, I got these errors:
(index):19 Uncaught SyntaxError: Unexpected identifier - function start() {
(index):46 Uncaught SyntaxError: missing ) after argument list
- $('#sign-out').attr('style', 'display: none');
(index):49 Uncaught SyntaxError: Unexpected identifier
- function renderButton() {
gapi.signin2.render('my-signin2', {
'scope': 'profile email',
'width': 240,
'height': 40,
'longtitle': true,
'theme': 'dark',
});
}
(index):66 Uncaught SyntaxError: Unexpected identifier - var script = document.createElement('script');
