Generate API Key

import React, { useState, useEffect } from 'react';
import { GoogleLogin, GoogleLogout } from 'react-google-login';
import { gapi } from 'gapi-script';
import { ReactSession } from 'react-client-session';
import { useNavigate } from 'react-router-dom';

function OAuth() {
    const [ profile, setProfile ] = useState('');
    const clientId = "{{CLIENT_ID}}";
    const [alertText , setAlertText] = useState('');
    useEffect(() => {
        const initClient = () => {
            gapi.client.init({
                clientId: clientId,
                scope: "https://www.googleapis.com/auth/blogger https://www.googleapis.com/auth/blogger.readonly"
            });
        };
        gapi.load('client:auth2', initClient);
    });

    const onSuccess = (res) => {
        setProfile(res.profileObj);
        ReactSession.set("ACCESS_TOKEN", res.tokenObj.access_token);
        ReactSession.set("PROFILE", profile);
    };

    const onFailure = (err) => {
        setAlertText('Oops! Login failed!');
        console.log('Error: ', err);
    };

    const navigate = useNavigate();
    
    const SignOut = () => {
        setProfile(null);
        ReactSession.set("ACCESS_TOKEN", null);
        ReactSession.set("PROFILE", null);
        ReactSession.clear();
        navigate('/');
    }

    return (
        <div className="d-flex flex-column h-100 bg-dark">
            <main className="flex-shrink-0">
                <div className="container col-10 text-center border border-secondary rounded min-vh-100 bg-white">
                    <div className="row justify-content-center">
                        <div className="col-5 mt-4"> 
                            <img src="/blogger-full.png" alt="Blogger API" className="card-img-top mb-5" />
                            <br /><br />
                            {ReactSession.get("ACCESS_TOKEN") ? (
                            <React.Fragment>
                                <div class="input-group mb-3">
                                    <label class="input-group-text" for="accessToken">Access Token</label>
                                    <input type="text" class="form-control" aria-label="Access Token" id="accessToken" aria-describedby="button-addon2" readOnly value={ReactSession.get("ACCESS_TOKEN")} />
                                    <button class="btn btn-outline-secondary" type="button" id="button-addon2" onClick={() => {navigator.clipboard.writeText(ReactSession.get("ACCESS_TOKEN"));}}>Copy</button>
                                </div>
                                <br /><br />
                                <GoogleLogout 
                                    clientId={clientId} 
                                    buttonText="Sign out" 
                                    onLogoutSuccess={SignOut} 
                                />
                            </React.Fragment>
                            ) : (
                                <React.Fragment>
                                    {alertText &&
                                        <div class={`alert alert-danger`} role="alert">
                                            {alertText}
                                        </div>
                                    }
                                    <br />
                                    <GoogleLogin
                                        clientId={clientId}
                                        buttonText="Sign in with Google"
                                        onSuccess={onSuccess}
                                        onFailure={onFailure}
                                        cookiePolicy={'single_host_origin'}
                                        isSignedIn={true}
                                    />
                                </React.Fragment>
                            )}
                        </div>
                    </div>
                </div>
            </main>
        </div>
    );
}

export default OAuth;