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!