How to get Supabase user token from server API

Issue #947 Sometimes Row Level Security is not enough and we want to do all logic server side, then we need a way for the server to get hold onto current user token. Send JWT token in Authorization header From client, we can get session from supabase auth, then send that as Bearer in Authorization header const session = await supabase.auth.getSession().data.session const token = session.access_token const response = await fetch(url, { 'GET', headers: { Authorization: `Bearer ${token}` } }) Decode token From the nextjs API Route, we can handle all auth logic in middleware....

August 30, 2023 路 2 min 路 Khoa Pham

How to mirror auth.users on Supabase

Issue #946 For security purposes, the auth schema is not exposed on the auto-generated API. We can make a profiles table in public namespace and mirror data from auth.users when user signs up. I need id, username and raw_user_metadata so I will mirror these columns. For easy, you can leverage Supabase SQL Editor -> Quickstarts -> User Management Starter script I don鈥檛 need Row Level Security as I manage database from server....

August 30, 2023 路 2 min 路 Khoa Pham

How to use Supabase auth with React Context

Issue #942 Expose supabase with createClient useSupabase.ts import { createClient } from '@supabase/supabase-js' const supabaseUrl = process.env.SUPABASE_URL const supabaseAnonKey = process.env.SUPABASE_ANON_KEY export const supabase = createClient(supabaseUrl!, supabaseAnonKey!) export const signIn = async () => { await supabase.auth.signInWithOAuth({ provider: 'twitter' }); } export const signOut = async () => { await supabase.auth.signOut(); } Wrap auth state in React Context AuthProvider.tsx import React, { useContext, createContext, useState, useEffect } from 'react' import { Session, User } from '@supabase/supabase-js' import { supabase } from '....

August 12, 2023 路 2 min 路 Khoa Pham

How to create React app with Parcel

Issue #941 In this tutorial we will be creating a React app with Parcel 2 with Typescript and Tailwind Install the following dependencies. Parcel supports TypeScript out of the box without any additional configuration. npm install --save-dev parcel npm install react react-dom npm install @types/react @types/react-dom --dev npm install -D tailwindcss postcss npx tailwindcss init We will be adding files to src folder src - index.html - App.tsx - App.css Create a ....

August 3, 2023 路 3 min 路 Khoa Pham

How to make Chrome extension with Nextjs 13

Issue #940 We can develop Nextjs 13 apps and export it to a Chrome extension. Start by init the project npx create-next-app@latest Here is the project structure with app router and not using src directory. I put an extension to the root of the project, where we can copy over the generated out folder extension - manifest.json app - page.tsx public - images Here is my script to build and copy over generated out and public images to extension folder...

August 2, 2023 路 1 min 路 Khoa Pham

How to make reusable Button component in React

Issue #936 From https://github.com/antonioerdeljac/next13-spotify import { forwardRef } from "react"; import { twMerge } from "tailwind-merge"; export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {} const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ className, children, disabled, type = 'button', ...props }, ref) => { return ( <button type={type} className={twMerge( ` w-full rounded-full bg-green-500 border border-transparent px-3 py-3 disabled:cursor-not-allowed disabled:opacity-50 text-black font-bold hover:opacity-75 transition `, disabled && 'opacity-75 cursor-not-allowed', className )} disabled={disabled} ref={ref} {...props} > {children} </button> ); }); Button....

July 21, 2023 路 1 min 路 Khoa Pham

How to make fullstack web app

Issue #935 I prefer UI Component that works with Nextjs and Tailwind CSS UI Libraries https://ui.shadcn.com/ https://daisyui.com/ https://www.radix-ui.com/ 馃憤 https://preline.co/ https://nextui.org/ https://mantine.dev/ https://chakra-ui.com/ https://getbootstrap.com/ https://bulma.io/ https://www.floatui.com/ Tailwind CSS templates https://preline.co/ https://tailwindui.com/ https://flowbite.com/ Icon Library https://github.com/lucide-icons/lucide https://github.com/react-icons/react-icons Lib https://github.com/timolins/react-hot-toast https://github.com/pmndrs/zustand https://github.com/react-hook-form/react-hook-form https://github.com/sindresorhus/query-string https://github.com/davidhu2000/react-spinners https://github.com/lukeed/clsx https://github.com/pacocoursey/next-themes https://github.com/colinhacks/zod https://github.com/remarkjs/react-markdown https://github.com/tameemsafi/typewriterjs https://github.com/lodash/lodash https://github.com/dcastil/tailwind-merge https://ahooks.js.org/ https://zod.dev/ Services Support https://crisp.chat Ref https://github.com/antonioerdeljac/next13-spotify https://github.com/shadcn-ui/taxonomy https://github.com/steven-tey/dub https://github.com/Elliott-Chong/quizmify

July 20, 2023 路 1 min 路 Khoa Pham

How to use FontAwesome 5 in Nextjs

Issue #802 npm i --save @fortawesome/fontawesome-svg-core \ @fortawesome/free-solid-svg-icons \ @fortawesome/free-brands-svg-icons \ @fortawesome/react-fontawesome import { faApple, faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons' import { faUser, faPowerOff, faAngleDown } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' <FontAwesomeIcon icon={faCoffee} />

May 19, 2021 路 1 min 路 Khoa Pham

How to use Bulma in Nextjs

Issue #801 Read https://nextjs.org/docs/basic-features/built-in-css-support#sass-support npm install bulma sass In styles/index.scss @import '~bulma/bulma'; In _app.tsx import '../styles/index.scss'

May 19, 2021 路 1 min 路 Khoa Pham

How to show img tag from GitHub markdown in Hugo

Issue #788 I just convert my blog https://onmyway133.com/ from Hexo.js back to Hugo again. Hugo now uses goldmark as the default markdown processor instead of blackfriday All works well, except that I use GitHub markdown to write articles, which use raw HTML img tag for uploaded images. Hugo works well with ![]() syntax but it ignores img tag <img width="574" alt="Screenshot 2021-02-26 at 10 08 38" src="https://user-images.githubusercontent.com/2284279/109279894-99d09a80-781a-11eb-9d50-10f46ba94105.png"> The solution is to tell goldmark to accept raw HTML....

March 2, 2021 路 1 min 路 Khoa Pham

How to sign in with apple for web with firebase

Issue #668 Authenticate Using Apple with JavaScript Use Firebase JS SDK https://firebase.google.com/docs/auth/web/apple Configure Sign in with Apple for the web https://help.apple.com/developer-account/#/dev1c0e25352 Go to Certificates, Identifiers & Profiles -> Identifier create 2 ids: App ID and Service ID For example: I have App ID com.onmyway133.myapp and Service ID com.onmyway133.myweb Remember that to view App ID or Service ID, there鈥檚 dropdown menu on the right For App ID, enable...

June 16, 2020 路 1 min 路 Khoa Pham

How to use webpack to bundle html css js

Issue #645 Install webpack npm init npm install webpack webpack-cli --save-dev vim webpack.config.js module.exports = { entry: "./index.js", mode: 'production', output: { filename: "./index.js" } } To invoke webpack, run below. Your output is dist/index.js npx webpack Minify js npm install babel-minify-webpack-plugin --save-dev Minify html npm install html-webpack-plugin --save-dev const MinifyPlugin = require('babel-minify-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: "./index.js", mode: 'production', output: { filename: "./index.js" }, plugins: [ new MinifyPlugin(), new HtmlWebpackPlugin({ template: 'index....

April 28, 2020 路 1 min 路 Khoa Pham

How to add independent page in hexo

Issue #641 Create a new page hexo new page mydemo Remove index.md and create index.html, you can reference external css and js in this index.html. Hexo has hexo new page mydemo --slug but it does not support page hierarchy Specify no layout so it is independent page. --- layout: false ---

April 26, 2020 路 1 min 路 Khoa Pham

How to use custom domain for GitHub pages

Issue #423 In DNS settings Add 4 A records A @ 185.199.110.153 A @ 185.199.111.153 A @ 185.199.108.153 A @ 185.199.109.153 and 1 CNAME record CNAME www learntalks.github.io In GitHub Select custom domain and type learntalks.com In source public/CNAME learntalks.com

September 17, 2019 路 1 min 路 Khoa Pham

App backed by website in iOS 9

Issue #32 iOS 9 introduces new ways for your app to work better, backed by your websites Smart App Banners Promoting Apps with Smart App Banners If the app is already installed on a user鈥檚 device, the banner intelligently changes its action, and tapping the banner will simply open the app. If the user doesn鈥檛 have your app on his device, tapping on the banner will take him to the app鈥檚 entry in the App Store...

May 10, 2017 路 2 min 路 Khoa Pham