OneSignal với Nextjs 14 website

'use client';

import {
    PropsWithChildren,
    createContext,
    useContext,
    useEffect,
    useState,
} from 'react';
import OneSignal from 'react-onesignal';

const useLogic = () => {
    const appId = '9dcb4b67-6e24-4eb5-9be6-a8e19b71f63d'; // muốn có cái này thì đăng ký app là có 

    const [enable, setEnable] = useState(false);

    useEffect(() => {
        const init = async () => {
            try {
                if (!enable) {
                    await OneSignal.init({
                        appId,
                        notifyButton: {
                            enable: true,
                        },
                        autoResubscribe: true, // tự động theo đõi 
                        autoRegister: true,

                        serviceWorkerPath: '/OneSignalSDKWorker.js',
                        allowLocalhostAsSecureOrigin: true,
                    });
                }

                setEnable(OneSignal.Notifications.permission);

                await OneSignal.Notifications.requestPermission();
                await OneSignal.Slidedown.promptPush();

                await OneSignal.login('huyi_abi');
                await OneSignal.User.addAlias('myAlias', 'huyi');

                await OneSignal.Debug.setLogLevel('trace'); // này để log, hông muốn log thì để "" 
            } catch (error) {
                console.log('error :>> ', error);
            }
        };
        init();
    }, [enable]);

    return {};
};

type Extra = {};

type ValueCtx = ReturnType<typeof useLogic> & Extra;

export const AppCtx = createContext({} as ValueCtx);

export const AppProvider = ({ ...props }: PropsWithChildren<Extra>) => {
    const valueCtx = useLogic();
    return (
        <AppCtx.Provider value={{ ...valueCtx, ...props }}>
            <>{props.children}</>
        </AppCtx.Provider>
    );
};

export const useAppCtx = () => useContext(AppCtx);