Hi,
I am trying to create a simple example to perform OAuth and 3rd Party Authentication using Google using React for my Client Application. While reading the documentation, I realized that there is no available API that allows me to do that in a single shot.
According to the documentation, Parse allows you to link your users with 3rd party authentication, enabling your users to sign up or log into your application using their existing identities. While reading other part of the documentation, the format for authData is the following
{
"google": {
"id": "user's Google id (string)",
"id_token": "an authorized Google id_token for the user (use when not using access_token)",
"access_token": "an authorized Google access_token for the user (use when not using id_token)"
}
}
Now, in order to get the id, id_token, and access_token, I need to follow the OAuth process. This is roughly described here. The thing is that in the document they don’t describe clearly how to do the Cloud Functions needed for this purpose
I wrote a couple of functions in Nodejs that allowed me to retrieve this authData
With this function, I can redirect to the Google Sign In page, and retrieve the code
app.get("/googleSignIn", function (req, res) {
// Create an OAuth2 client object from the credentials in our config file
const oauth2Client = new OAuth2(
CONFIG.oauth2Credentials.client_id,
CONFIG.oauth2Credentials.client_secret,
CONFIG.oauth2Credentials.redirect_uris[0]
);
// Obtain the google login link to which we'll send our users to give us access
const loginLink = oauth2Client.generateAuthUrl({
// Indicates that we need to be able to access data continously without the user constantly giving us consent
access_type: "offline",
// Using the access scopes from our config file
scope: CONFIG.oauth2Credentials.scopes,
});
return res.render("index", { loginLink: loginLink });
});
Then, with this code below I get the id, id_token and access_token
app.get("/redirect", function (req, res) {
// Auth data for Parse
const authData = {
google: {
id: "",
id_token: "",
access_token: "",
},
};
// Create an OAuth2 client object from the credentials in our config file
const oauth2Client = new OAuth2(
CONFIG.oauth2Credentials.client_id,
CONFIG.oauth2Credentials.client_secret,
CONFIG.oauth2Credentials.redirect_uris[0]
);
if (req.query.error) {
// The user did not give us permission.
return res.status(500).send('Server Error');
} else {
oauth2Client.getToken(req.query.code, (err, token) => {
if (err) return res.status(500).send('Server Error');
oauth2Client.setCredentials({ access_token: token.access_token });
var oauth2 = google.oauth2({
auth: oauth2Client,
version: "v2",
});
oauth2.userinfo.get(function (err, user) {
if (err) return res.status(500).send('Server Error');
authData.google.id = user.data.id;
authData.google.id_token = token.id_token;
authData.google.access_token = token.access_token;
return res.status(200).json(authData);
});
});
}
});
The thing is that I need googleapis to make this work. But, I cannot install those API in the Cloud Function.
At this point, I got stuck. It’s been two days since I am trying to get this done. Have anyone managed to get an end-to-end flow to use Google OAuth SignIn with React?
Any help will be appreciated
Guz
