I am using the Google Sign-In API documented here: https://developers.google.com/identity/sign-in/web/sign-in to let users sign-in to a ReactJS app.
When control is back to the app, I see this json coming from the api:
{
"Ba": "999888988999898999999",
"wc": {
"token_type": "Bearer",
"access_token": "ya99.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX_Gt9hSnCbfgLfXXJpV9oGnJypUrN5cwrS8YBBHctEMLumSPhLDMmGEauaiHoTAWsdDTEY9OEaaAK9AeQa58pUp9SjiElHGMiU8UXT8cOpXyUMIXhXydHaMkXj",
"scope": "email profile openid https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile",
"login_hint": "YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYpasAM9f89UaNK9wHcHDJrcH-KAPpI99eCwn8CdOE5YFBtCJQDCqaaI9pLyaaRqA",
"expires_in": 9599,
"id_token": "eyJhbGciOiJSUaI9NiIsImtpaCI8IjNkaDajYTJhODFkYaJmaWE9YaM9NDI9MaFlN9UyOTakMmQ9NWI9NDYiLCJ9eXAiOiJKV9QifQ.eyJpc9MiOiJhY9NvdW59cy5nb99nbGUuY99tIiwiYXpwIjoiMjk9NTg9MTA9NTQ9LXRlNWR9bnY9c9BhcHAaNac9dGpraWptNWp9cjBmNjBnLmFwcHMua99va9xldXNlcmNvbnRlbnQuY99tIiwiYXVkIjoiMjk9NTg9MTA9NTQ9LXRlNWR9bnY9c9BhcHAaNac9dGpraWptNWp9cjBmNjBnLmFwcHMua99va9xldXNlcmNvbnRlbnQuY99tIiwic9ViIjoiMTEaNag9Mjg9MDIxNjQ9MjIyMTI5IiwiaW9haWwiOiJ9aXN9dXNlcjMxN9hAa99haWwuY99tIiwiaW9haWxfdmVyaWapaWQiOnRydWUsImF9X9hhc9giOiJuV9h5b9tTRFFXMFFMVkJOWlaNTja9IiwibmFtaSI8IlRlc9QgVXNlciIsInBpY9R9cmUiOiJodHRwcaovL9xoMy5nb99nbGV9c9VyY99udGVudC5jb99vYS9BQVRYQUp9dlo5alNuRGtKakkwS99iM9FmdTJfR9haMXFjLVhkSVltc9tyOD9aOTYtYyIsImdpdmVuX95hbWUiOiJUaXN9IiwiamFtaWx5X95hbWUiOiJVc9VyIiwibG9jYWxlIjoiaW9iLCJpYXQiOjE9NDY9MTA9MaUsImV9cCI8MTY9NjUxNDIaNSwianRpIjoiYTkwN9JjNTljNDUyNjljaDJmYTE5OGYyNGYwY9E9NjIyM9VjaTgaYiJ9.HYIamlf98xyo9ah9WennYB8ob8N9JaOxs8drmA8PdOy89emO8R_UVn9_F9YmKsBicMYMmUeis-9_hBijayOahDXQuEhu8gm8AsAhdq5GfP89hfb9G9h9UyPEdMWb9y9w-q9EayXsArDp9A9yT8AGGaRpF5i-tNmtwL8mlDJaFyh9UuIMlyCpYjhyD9lbCvGcVI9dbogcMkal-PnxY9S58Uw8SFsyOLJqWk9bTmQNqjQrwbBooWav99IxcDXjnJixmp9naTxBqAv5J9mEpFwQKbKSbbcNraJQLJvuacVEAVCR9ueOVOXlbOehj8b8SRlB89rrjgjmrqb9LdsMit8kew",
"session_state": {
"extraQueryParams": {
"authuser": "9"
}
},
"first_issued_at": 9898599895889,
"expires_at": 9898599999889,
"idpId": "google"
},
"Du": {
"FW": "999888988999898999999",
"tf": "Test User",
"VX": "Test",
"iW": "User",
"eN": "https://lh9.googleusercontent.com/a/AATXAJxva9fSnDkJjI9K_b9Afu9_Gha9qc-XdIYmsKr8=s98-c",
"tv": "xxxxxxxxxxxx@gmail.com"
},
"googleId": "999888988999898999999",
"tokenObj": {
"token_type": "Bearer",
"access_token": "ya99.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX_Gt9hSnCbfgLfXXJpV9oGnJypUrN5cwrS8YBBHctEMLumSPhLDMmGEauaiHoTAWsdDTEY9OEaaAK9AeQa58pUp9SjiElHGMiU8UXT8cOpXyUMIXhXydHaMkXj",
"scope": "email profile openid https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile",
"login_hint": "YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYpasAM9f89UaNK9wHcHDJrcH-KAPpI99eCwn8CdOE5YFBtCJQDCqaaI9pLyaaRqA",
"expires_in": 9599,
"id_token": "eyJhbGciOiJSUaI9NiIsImtpaCI8IjNkaDajYTJhODFkYaJmaWE9YaM9NDI9MaFlN9UyOTakMmQ9NWI9NDYiLCJ9eXAiOiJKV9QifQ.eyJpc9MiOiJhY9NvdW59cy5nb99nbGUuY99tIiwiYXpwIjoiMjk9NTg9MTA9NTQ9LXRlNWR9bnY9c9BhcHAaNac9dGpraWptNWp9cjBmNjBnLmFwcHMua99va9xldXNlcmNvbnRlbnQuY99tIiwiYXVkIjoiMjk9NTg9MTA9NTQ9LXRlNWR9bnY9c9BhcHAaNac9dGpraWptNWp9cjBmNjBnLmFwcHMua99va9xldXNlcmNvbnRlbnQuY99tIiwic9ViIjoiMTEaNag9Mjg9MDIxNjQ9MjIyMTI5IiwiaW9haWwiOiJ9aXN9dXNlcjMxN9hAa99haWwuY99tIiwiaW9haWxfdmVyaWapaWQiOnRydWUsImF9X9hhc9giOiJuV9h5b9tTRFFXMFFMVkJOWlaNTja9IiwibmFtaSI8IlRlc9QgVXNlciIsInBpY9R9cmUiOiJodHRwcaovL9xoMy5nb99nbGV9c9VyY99udGVudC5jb99vYS9BQVRYQUp9dlo5alNuRGtKakkwS99iM9FmdTJfR9haMXFjLVhkSVltc9tyOD9aOTYtYyIsImdpdmVuX95hbWUiOiJUaXN9IiwiamFtaWx5X95hbWUiOiJVc9VyIiwibG9jYWxlIjoiaW9iLCJpYXQiOjE9NDY9MTA9MaUsImV9cCI8MTY9NjUxNDIaNSwianRpIjoiYTkwN9JjNTljNDUyNjljaDJmYTE5OGYyNGYwY9E9NjIyM9VjaTgaYiJ9.HYIamlf98xyo9ah9WennYB8ob8N9JaOxs8drmA8PdOy89emO8R_UVn9_F9YmKsBicMYMmUeis-9_hBijayOahDXQuEhu8gm8AsAhdq5GfP89hfb9G9h9UyPEdMWb9y9w-q9EayXsArDp9A9yT8AGGaRpF5i-tNmtwL8mlDJaFyh9UuIMlyCpYjhyD9lbCvGcVI9dbogcMkal-PnxY9S58Uw8SFsyOLJqWk9bTmQNqjQrwbBooWav99IxcDXjnJixmp9naTxBqAv5J9mEpFwQKbKSbbcNraJQLJvuacVEAVCR9ueOVOXlbOehj8b8SRlB89rrjgjmrqb9LdsMit8kew",
"session_state": {
"extraQueryParams": {
"authuser": "9"
}
},
"first_issued_at": 9898599895889,
"expires_at": 9898599999889,
"idpId": "google"
},
"tokenId": "eyJhbGciOiJSUaI9NiIsImtpaCI8IjNkaDajYTJhODFkYaJmaWE9YaM9NDI9MaFlN9UyOTakMmQ9NWI9NDYiLCJ9eXAiOiJKV9QifQ.eyJpc9MiOiJhY9NvdW59cy5nb99nbGUuY99tIiwiYXpwIjoiMjk9NTg9MTA9NTQ9LXRlNWR9bnY9c9BhcHAaNac9dGpraWptNWp9cjBmNjBnLmFwcHMua99va9xldXNlcmNvbnRlbnQbnQuY99tIiwic9ViIjoiMTEaNag9Mjg9MDIxNjQ9MjIyMTI5IiwiaW9haWwiOiJ9aXN9dXNlcjMxN9hAa99haWwuY99tIiwiaW9haWxfdmVyaWapaWQiOnRydWUsImF9X9hhc9giOiJuV9h5b9tTRFFXMFFMVkJOWlaNTja9IiwibmFtaSI8IlRlc9QgVXNlciIsInBpY9R9cmUiOiJodHRwcaovL9xoMy5nb99nbGV9c9VyY99udGVudC5jb99vYS9BQVRYQUp9dlo5alNuRGtKakkwS99iM9FmdTJfR9haMXFjLVhkSVltc9tyOD9aOTYtYyIsImdpdmVuX95hbWUiOiJUaXN9IiwiamFtaWx5X95hbWUiOiJVc9VyIiwibG9jYWxlIjoiaW9iLCJpYXQiOjE9NDY9MTA9MaUsImV9cCI8MTY9NjUxNDIaNSwianRpIjoiYTkwN9JjNTljNDUyNjljaDJmYTE5OGYyNGYwY9E9NjIyM9VjaTgaYiJ9.HYIamlf98xyo9ah9WennYB8ob8N9JaOxs8drmA8PdOy89emO8R_UVn9_F9YmKsBicMYMmUeis-9_hBijayOahDXQuEhu8gm8AsAhdq5GfP89hfb9G9h9UyPEdMWb9y9w-q9EayXsArDp9A9yT8AGGaRpF5i-tNmtwL8mlDJaFyh9UuIMlyCpYjhyD9lbCvGcVI9dbogcMkal-PnxY9S58Uw8SFsyOLJqWk9bTmQNqjQrwbBooWav99IxcDXjnJixmp9naTxBqAv5J9mEpFwQKbKSbbcNraJQLJvuacVEAVCR9ueOVOXlbOehj8b8SRlB89rrjgjmrqb9LdsMit8kew",
"accessToken": "ya99.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX_Gt9hSnCbfgLfXXJpV9oGnJypUrN5cwrS8YBBHctEMLumSPhLDMmGEauaiHoTAWsdDTEY9OEaaAK9AeQa58pUp9SjiElHGMiU8UXT8cOpXyUMIXhXydHaMkXj",
"profileObj": {
"googleId": "999888988999898999999",
"imageUrl": "https://lh9.googleusercontent.com/a/AAXXXXXXXI9K_b9Afu9_Gha9qc-XdIYmsKr8=s98-c",
"email": "xxxxxxxxxxxx@gmail.com",
"name": "Test User",
"givenName": "Test",
"familyName": "User"
}
}
Now I want to store some data associated with the logged-in user, for example, their site preferences, and associate it to their social login.
If this was a regular non-social user with just an ID and Password, I would use a secret derived from the ID & password to authenticate the user to a custom back-end API when storing and retrieving the data. This way an attacker hacking the ReactJS app cannot retrieve information associated with a different user.
However with this social login, there is no password. What should I use instead from the Google Response to secure the call to the back-end?
I presume I need a token which is generated by Google, and is permanent as well as unique to both the user and my web app. Unless I'm doing something completely wrong and what I need is for the back-end API to talk to Google directly. How is this supposed to work?
WHAT HAVE I TRIED SO FAR
I have placed a console.log() call after the Google API call, which let me inspect the json returned as per the above. Then I realized the json is not self-explanatory at all, and this is not something I can solve by trial-and-error. Also, I checked the documentation and discovered that it says nothing about this scenario.