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!