Google Oauth 2.0
OAuth Flow 1. Get Authorization Code Redirect the user to the Google authorization endpoint to obtain an authorization code: 1 2 3 4 5 6 7 8 9 10 11 12 13 const returnUri = window.location.origin + "/signin"; const GOOGLE_CLIENTID = import.meta.env.VITE_CLIENT_ID; const searchParams = new URLSearchParams({ redirect_uri: returnUri, response_type: "code", client_id: GOOGLE_CLIENTID, access_type: "offline", prompt: "consent", scope: "openid email profile", }); window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?${searchParams.toString()}`; 2. Exchange Authorization Code for Tokens Exchange the authorization code for access & refresh tokens: ...
MDX Tooling
Understanding the use of mdx with toolset 1. We need to configure @mdx-js/rollup , this could be different for different toolset(i鈥檓 using vite; which uses rollup for production build). 1 2 3 4 5 6 7 8 9 10 //vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import mdx from "@mdx-js/rollup"; export default defineConfig(async () => { return { plugins: [react(), mdx()], }; }); 2. We need the provider of MDX to wrap the app to apply the imported *.mdx 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //App.ts import { MDXProvider } from "@mdx-js/react"; function App() { return ( <> <MDXProvider> <TestMarkdown /> </MDXProvider> </> ); } export default App; Note: This doesnot support code higlighting and table; we need rehype-highlight, remark-gfm respectively for that ...
Refreshing route pages in react-router
React Router - Content disappear on refresh (client route access) Issue - React Router is client side routing and when a url is requested to server, it has no such route. Discussion react-router-cannot-get-url-refresh React-router URLs don鈥檛 work when refreshing or writing manually Fixes HashRouter - has # before all routes, clever hack, ugly and issues with google console redirect url. Express server to distribute static assets. 鈥lot more here for webpack on dev servers, apache server. Usabe Fixes _redirects file on public folder with following content. 1 /* /index.html 200 worked on netlify ...