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: ...

September 15, 2020 · 3 min · 517 words · biswash

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’m 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 ...

September 15, 2020 · 3 min · 464 words · biswash

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’t 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. …alot 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 ...

September 15, 2020 · 1 min · 183 words · biswash