Mirochiu's coding note

這幾天寫了好幾個功能，今天想要部屬到Firebase時發生了401部屬錯誤，完整訊息如下: Error: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project. 該怎麼處理呢? 

一個會員網站提供上傳個人圖檔是一個很基本的應用。現在如AI解析及互動上也會需要用到圖檔、聲音，甚至是影片來提供服務，所以上傳檔案是一件稀鬆平常的事情。 當然，firebase中，可以透過使用Firebase storage的前端套件來快速的完成這件事情，不需要額外思考檔案上傳背後的問題。然而，當你沒有使用Firebase Auth來作會員登入系統，你馬上就面臨資料隱私的兩難問題。 你的Firebase storage存取規則無法檢驗存取的是否為用戶，且無法依照會員角色來區分存取權限。直到最後你只能妥協，將storage存取權限完全開放，使得上傳功能與用戶資料完全裸奔在網際網路上。在App router中透過Route Handler，我們可以管控會員是否有上傳與存取的權利。

這篇簡要的彙整成6個步驟，演示如何以以Server Action在Next.js中操作MongoDB，輸入新的資料。 演示成果可 點擊這裡進入[輸入時顯示候選清單]

久久遇到一次的老問題，安裝其他解壓縮軟體就能無痛處理。

因為NextAuth無法直接在Firebase hosting上使用所以開始自幹一個auth模組，這篇分享一些關於模組週邊使用的5項程式碼。 分享以下5類程式碼 AuthSessionProvider.tsx layout.tsx middleware.tsx Server Actions Components

使用URL的參數(URL parameter)來顯示訊息是一種方便的作法。在SPA中也能使用，不需要有後端server的幫助。 這裡整理React.js和Next.js中用URL parameter來顯示訊息的方法，由於Next.js App router，這裡會都演示一次。

久違的需要轉錄CD成檔案，發現我已經不知道Ubuntu上可以用哪些軟體。為自己整理一下可以用得三種轉換方式，一個CLI，兩個GUI方案。

相信許多人使用Firebase部屬網站，都會遇到這個危險網站的問題。本機電腦開發時都沒有問題，但是部屬後網站，只要點擊登入頁就會被Chrome標記成危險網站，使用者要登入都沒辦法。這到底該怎麼解決呢?

這裡使用範例MUI本身示範例，因為有時寫一寫會忘記一些步驟，乾脆就會整成一篇。以下整理成10點內容 1. 使用範例專案 pnpm create next-app {你喜歡的專案目錄名稱} --example https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts 這裡使用MUI官方提供的Next.js的typescript範例，程式碼 請參考這裡 使用到的主要技術堆疊如下 a. MUI v5  b. Next.js v14 - App router c. typescript v5