Creating a login screen for certain users with Oauth2

Hello!
My boss wants me to create a Freshdesk custom app that starts with a login screen for a few key users who are clients of our business. Essentially I need to create a small login screen for clients to use their google accounts to log in with before being displayed options for products they would like to add, which creates tickets in our system.
Right now I am stuck at that first step, I have create a react app in Freshdesk successfully, and have taken the steps to create a google workspace to include oath2, but the app doesn’t seem to load (it is still just hosted locally) any of the react elements I am using for the google login.

Here are a few snippets, leaving out the client id information:

This is my login button:
const onSuccess = (res) => {
console.log("Login success! Current user: ", res.profileObj);
}
const onFailure = (res) => {
console.log("Login failed! res: ", res);
}
return (


<GoogleLogin
clientId={clientId}
buttonText=“Login”
onSuccess={onSuccess}
onFailure={onFailure}
cookiePolicy={‘single_host_origin’}
isSignedIn={true}
/>

)
}
export default Login;

This is my logout button:
function Logout() {
const onSuccess = () => {
console.log(“Log out successfull!”);
}
return (


<GoogleLogout
clientId={clientId}
buttonText={“Logout”}
onLogoutSuccess={onSuccess}
/>

)
}
export default Logout;

And here is my current App.js file:

import React, { useState, useLayoutEffect } from ‘react’;
import ‘./App.css’;
import LoginButton from “./components/login”
import LogoutButton from “./components/logout”
import { useEffect } from ‘react’
import { gapi } from ‘gapi-script’
import Head from ‘./components/Head’

const clientId = Left blank for security

const App = () => {

useEffect(() => {
function start() {
gapi.client.init({
clientId: clientId,
scope: “”
})
};

gapi.load('client:auth2', start);

})

const [loaded, setLoaded] = useState(false);
const [child, setChild] = useState(

App is loading

)

useLayoutEffect(() => {
const script = document.createElement(‘script’);
script.src = ‘{{{appclient}}}’;
script.addEventListener(‘load’, () => setLoaded(true));
script.defer = true;
document.head.appendChild(script);
}, );

useLayoutEffect(() => {
if (!loaded) return
app.initialized().then((client) => {
client.instance.context().then(function (data) {

    let app_page = [<Head />,
                    <LoginButton />,
                    <LogoutButton />] // Sets the components to load

    setChild(app_page) // Loads components variable
  })
})

}, [loaded])

return (


{child}

)
}

export default App;

Any help is appreciated, is there any clear place I am doing something wrong, or any additional info I can provide? Thank you!

1 Like

@Freddy kindly share your thoughts on this!

Hi Jordan_Betz! Overall, your code looks good but there are a few points that may need adjustment or clarification.

  1. First, ensure that you have installed react-google-login and gapi-script packages by running:
npm install react-google-login gapi-script
  1. In your login button component, make sure that you have imported the necessary dependencies:
import React from 'react';
import { GoogleLogin } from 'react-google-login';
  1. Similarly, in your logout button component, ensure that you have imported the necessary dependencies:
import React from 'react';
import { GoogleLogout } from 'react-google-login';
  1. In your App.js file, you have used {{{appclient}}} as the source for the script element. However, I am not sure if that is the correct value. If you are using the Freshdesk app placeholder, make sure you replace that with the actual path to the Freshdesk app’s client library.

  2. You mentioned that your app is hosted locally. Note that the cookiePolicy={'single_host_origin'} configuration will only work on a single hosted origin. If your app is running on a local server, you may run into issues with this setting. You can try removing the cookiePolicy line if you encounter any issues during the login process.

After checking these points, try running your app again and see if the login and logout components