Блог

 import {  createRouterMiddleware,  initialRouterState, } from 'connected-next-router'; import { createWrapper } from 'next-redux-wrapper'; import Router from 'next/router'; import { applyMiddleware, createStore } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import { loadUser } from 'redux-oidc'; import thunkMiddleware from 'redux-thunk'; import reducerList from './reducerList'; import userManager from './managers/userManager';  const makeStore = (context) =gt; {  const routerMiddleware = createRouterMiddleware();   const middlewares = [thunkMiddleware, routerMiddleware];  const middlewareEnhancer = applyMiddleware(...middlewares);   const enhancers = [middlewareEnhancer];  const composedEnhancers = composeWithDevTools(...enhancers);   const { asPath } = context.ctx || Router.router || {};   let initialState;  if (asPath) {  initialState = {  router: initialRouterState(asPath),  oidc: undefined,  language: "tr",  cartItems: [],  };  }   const store = createStore(reducerList, initialState, composedEnhancers);   if (process.env.NODE_ENV !== 'production' amp;amp; module.hot) {  module.hot.accept('./reducerList', () =gt;  store.replaceReducer(reducerList)  );  }   if (typeof window !== 'undefined') {  loadUser(store, userManager);  }   return store; };  export const wrapper = createWrapper(makeStore); 

 import React, { useEffect, useState, useContext } from 'react'; import NavbarMenu from '../src/components/navbar/Menu'; import Layout from '../src/components/requirements/Layout'; import '../src/styles/globals.css'; import Head from 'next/head'; import { configureStore } from '../src/redux/configureStore'; import { PersistGate } from 'redux-persist/integration/react'; import { wrapper } from '../src/redux/oidcStore';  const { persistor } = configureStore();  function MyApp({ Component, pageProps }) {  const [loading, setLoading] = useState(true);   useEffect(() =gt; {  setTimeout(() =gt; {  setLoading(false);  }, 500);  }, []);   return (  lt;gt;  lt;Headgt;  lt;titlegt;Oidc Examplelt;/titlegt;  lt;link  rel="stylesheet"  href="https://fonts.googleapis.com/icon?family=Material Icons"  /gt;  lt;link  rel="stylesheet"  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700amp;display=swap"  /gt;  lt;link  rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"  integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="  crossorigin="anonymous"  referrerpolicy="no-referrer"  /gt;  lt;/Headgt;  {loading ? (  lt;h1gt;Loading to page. Please Wait lt;/h1gt;  ) : (  lt;gt;  lt;PersistGate persistor={persistor}gt;  lt;NavbarMenu /gt;  lt;Layoutgt;  lt;Component {...pageProps} /gt;  lt;/Layoutgt;  lt;/PersistGategt;  lt;/gt;  )}  lt;/gt;  ); }  export default wrapper.withRedux(MyApp); 

 import { combineReducers } from 'redux'; import languageReducer from './reducers/languageReducer'; import cartReducer from './reducers/cartReducer'; import { reducer as OidcReducer } from 'redux-oidc';    const reducerList = combineReducers({  language: languageReducer,  cart: cartReducer,  oidc: OidcReducer });  export default reducerList; 

 import { WebStorageStateStore } from 'oidc-client'; import { createUserManager } from 'redux-oidc';  let userManager;  if (typeof window !== 'undefined') {  const userManagerConfig = {  client_id: 'OidcExample_App',  redirect_uri: 'http://localhost:3000/auth/callback',  response_type: 'token id_token',  scope: 'openid profile',  authority: 'https://localhost:44311',  post_logout_redirect_uri: 'http://localhost:3000/auth/signout',  filterProtocolClaims: true,  loadUserInfo: true,  userStore: new WebStorageStateStore({ store: window.localStorage }),  };   userManager = createUserManager(userManagerConfig); } else {  userManager = undefined; }  export default userManager; 

 import userManager from "../../src/redux/managers/userManager"; import { useRouter } from 'next/router'; import { CallbackComponent } from 'redux-oidc';  export default function Callback() {  const router = useRouter();   const successCallback = (user) =gt; {  const uri = user.state["returnUrl"];  redirect(uri);  };   const errorCallback = (error) =gt; {  // todo notify login failed  console.error(error);  redirect("/error");  };   const redirect = (uri) =gt; {  router.push(uri || "/");  };   return (  lt;CallbackComponent userManager={userManager} successCallback={successCallback} errorCallback={errorCallback} gt;  lt;h1gt;yükleniyor lt;/h1gt;  lt;/CallbackComponentgt;  ); }