HangmanLab.Frontend/src/AuthProvider.js

import React, { createContext, useEffect, useState } from "react";
import { UserManager } from "oidc-client-ts";
import {appConfig} from "./confs/appConfig";


export const AuthContext = createContext({
    user: null,
    login: () => {},
    logout: () => {},
    roles: [],
});

const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(null);
    const [roles, setRoles] = useState([]);
    const userManager = new UserManager(appConfig.oidcConfig);

    useEffect(() => {
        userManager.getUser()
            .then((user) => {
                if (user && !user.expired) {
                    setUser(user);
                    localStorage.setItem("accessToken", user.access_token);
                    const clientRoles = user?.profile?.resource_access?.[appConfig.kc_client_id]?.roles || [];
                    setRoles(clientRoles);
                } else if (user && user.expired) {
                    userManager.signinSilent()
                        .then((newUser) => {
                            setUser(newUser);
                            localStorage.setItem("accessToken", newUser.access_token);
                            const clientRoles =
                                newUser?.profile?.resource_access?.[appConfig.kc_client_id]?.roles || [];
                            setRoles(clientRoles);
                        })
                        .catch((err) => {
                            console.error(err);
                        })
                }
            });
        }, [userManager]);

    const login = () => {
        userManager
            .signinRedirect()
            .catch(
                (err) => {
            console.log(appConfig);
            console.log(err);
        });
    }
    const logout = () => userManager.signoutRedirect();

    return (
        <AuthContext.Provider value={{ user, roles, login, logout }}>
            {children}
        </AuthContext.Provider>
    );
};

export default AuthProvider;