Which token from Google's Social Login API should you use for securing back-end data in a public-facing ReactJS app?

Viewed 85

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.

0 Answers
Related