fix: replace broken GitHub login with Clerk auth by Abhash-Chakraborty · Pull Request #1520 · recodehive/recode-website

Abhash-Chakraborty · 2026-05-15T07:22:02Z

Summary

remove the retired Firebase auth implementation
replace it with Clerk auth in the navbar and protect only the leaderboard view
add Clerk env documentation and style the auth modal to match the site
clean up the pre-existing TypeScript issues so verification passes again

Testing

npm run typecheck
npm run build
npx clerk doctor --json
manually verified signed-out leaderboard gating and Clerk modal rendering locally

Closes #322

vercel · 2026-05-15T07:22:06Z

@Abhash-Chakraborty is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2026-05-15T07:22:10Z

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

Get free Consultation use code recode50 to get free: Mentorship for free.
Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.
Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

github-actions · 2026-05-15T07:22:18Z

✅ Synchronized metadata from Issue #322:

Labels: area:API, area:dev-env, area:production-image, area:backend-sql, level 2
Milestone: recode:launch 3.0

Copilot

Pull request overview

This PR replaces the retired Firebase GitHub login flow with Clerk-based authentication in the Docusaurus site, wiring Clerk into the app shell, navbar, and dashboard leaderboard gating.

Changes:

Adds Clerk configuration, provider setup, navbar auth UI, and leaderboard sign-in gating.
Removes Firebase auth code and dependencies.
Updates related TypeScript declarations, styling, and lockfile/package metadata.

Reviewed changes

Copilot reviewed 17 out of 19 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
`.env.example`	Documents Clerk publishable and secret keys.
`docusaurus.config.ts`	Loads local env and exposes Clerk publishable key/custom navbar mount point.
`package.json`	Adds Clerk dependency, removes Firebase packages, updates Node engine.
`package-lock.json`	Updates dependency tree for auth package changes.
`src/components/ui/NavbarClerkAuth.tsx`	Adds Clerk navbar sign-in/user-button portal.
`src/components/ui/NavbarFirebaseAuthGithub.tsx`	Removes Firebase navbar portal.
`src/components/ui/FirebaseAuthGithub.tsx`	Removes Firebase GitHub sign-in component.
`src/lib/firebase.ts`	Removes Firebase initialization.
`src/theme/Root.tsx`	Wraps site content with ClerkProvider when configured.
`src/theme/Layout.tsx`	Swaps Firebase navbar auth for Clerk navbar auth.
`src/pages/dashboard/index.tsx`	Gates leaderboard rendering behind Clerk sign-in.
`src/pages/dashboard/dashboard.css`	Adds styles for leaderboard auth state/button and formatting updates.
`src/css/custom.css`	Updates navbar selectors/styles for Clerk auth control.
`src/theme/Navbar/Content/index.tsx`	Adjusts navbar item key/error handling typing.
`src/types/global.d.ts`	Refines ambient type declarations.
`src/pages/merch/index.tsx`	Adds Framer Motion variant typings.
`src/pages/blogs/index.tsx`	Adds HTMLElement cast for image fallback handling.
`src/components/discussions/DiscussionCard.tsx`	Adds HTMLElement cast for avatar fallback handling.
`src/components/blogCarousel/blogCard.tsx`	Adds HTMLElement cast for image fallback handling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Adez017 · 2026-05-15T12:16:21Z

+import { Show, SignInButton, UserButton } from "@clerk/react";
+import { createPortal } from "react-dom";
+
+const NavbarClerkAuthContent: React.FC = () => {
+  return (
+    <div className="clerk-navbar-auth">
+      <Show when="signed-out">
+        <SignInButton mode="modal">
+          <button className="clerk-navbar-sign-in">Sign in</button>
+        </SignInButton>
+      </Show>
+      <Show when="signed-in">
+        <UserButton />
+      </Show>


@Abhash-Chakraborty can you look into this

github-actions · 2026-05-15T07:29:53Z

✅ Synchronized metadata from Issue #322:

Labels: area:API, area:dev-env, area:production-image, area:backend-sql, level 2
Milestone: recode:launch 3.0

vercel · 2026-05-15T10:40:57Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
recode-website	Ready	Preview, Comment	May 15, 2026 10:42am

sanjay-kv · 2026-05-15T10:43:54Z

@Adez017
I need your review here

Adez017 · 2026-05-15T12:16:21Z

+import { Show, SignInButton, UserButton } from "@clerk/react";
+import { createPortal } from "react-dom";
+
+const NavbarClerkAuthContent: React.FC = () => {
+  return (
+    <div className="clerk-navbar-auth">
+      <Show when="signed-out">
+        <SignInButton mode="modal">
+          <button className="clerk-navbar-sign-in">Sign in</button>
+        </SignInButton>
+      </Show>
+      <Show when="signed-in">
+        <UserButton />
+      </Show>


@Abhash-Chakraborty can you look into this

Adez017 · 2026-05-15T12:17:15Z

+}

-const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
-  const [isHovered, setIsHovered] = React.useState(false);


why this changes , can you explain ?

Adez017 · 2026-05-15T12:18:28Z

@Abhash-Chakraborty @sanjay-kv , could you guys confirm we had implemented the correct github sign in ?

Adez017 · 2026-05-15T12:19:20Z

I had made a thorough review and found some changes in blogs , discussions and dashboard cards or css , can you provide any clarification on that ? @Abhash-Chakraborty

Abhash-Chakraborty · 2026-05-16T07:32:38Z

I had made a thorough review and found some changes in blogs , discussions and dashboard cards or css , can you provide any clarification on that ? @Abhash-Chakraborty

The blog, discussion, merch, and dashboard-related edits are small cleanup/type-safety fixes I added while testing the branch, not part of the core auth change.

Abhash-Chakraborty · 2026-05-16T07:36:11Z

Refined the blog card to use typed props and shared author helpers, and improved author rendering with linked names plus stacked avatars.

Abhash-Chakraborty · 2026-05-16T07:36:35Z

Small cleanup: removed an unused icon import and tightened the image fallback typing so TypeScript can safely handle the DOM element.

Abhash-Chakraborty · 2026-05-16T07:36:58Z

Added the new navbar auth component that shows Clerk sign-in when signed out and the user menu when signed in.

Abhash-Chakraborty · 2026-05-16T07:37:14Z

Removed this

Abhash-Chakraborty · 2026-05-16T07:38:37Z

Added styles for the leaderboard auth gate state and applied some formatting cleanup to existing dashboard CSS.

Abhash-Chakraborty · 2026-05-16T08:11:51Z

Screen.Recording.2026-05-16.133417.mp4

Adez017 · 2026-05-16T08:19:57Z

Hi @Abhash-Chakraborty , great work but can we keep the same design as we currently have which shows sign in with GitHub with logo

Adez017 · 2026-05-16T11:21:25Z

@Abhash-Chakraborty something like this

Abhash-Chakraborty · 2026-05-16T14:13:55Z

@sanjay-kv please properly configure prod env in clerk and add variables

Abhash-Chakraborty added 3 commits May 15, 2026 12:49

chore: remove legacy firebase auth files

de67869

feat: replace firebase login with clerk auth

1021c1d

fix: resolve existing typecheck errors

c55abb4

Copilot AI review requested due to automatic review settings May 15, 2026 07:22

github-actions Bot added in-review The current changes are in review and would need approval and testing before merging level 1 10 points recode this is label for leaderboard labels May 15, 2026

github-actions Bot added this to the recode:launch 3.0 milestone May 15, 2026

Copilot started reviewing on behalf of Abhash-Chakraborty May 15, 2026 07:22 View session

fix: clean lint warnings in touched files

ae4ac3d

Copilot AI reviewed May 15, 2026

View reviewed changes

fix: restore lockfile peer entries for ci

4bcbcf2

Adez017 requested review from Adez017 and sanjay-kv May 15, 2026 10:00

Adez017 assigned Abhash-Chakraborty May 15, 2026

vercel Bot deployed to Preview May 15, 2026 10:42 View deployment

Adez017 reviewed May 15, 2026

View reviewed changes

Abhash-Chakraborty commented May 16, 2026

View reviewed changes

sanjay-kv approved these changes May 16, 2026

View reviewed changes

sanjay-kv merged commit 768171f into recodehive:main May 16, 2026
6 checks passed

Conversation

Abhash-Chakraborty commented May 15, 2026

Summary

Testing

Uh oh!

vercel Bot commented May 15, 2026

Uh oh!

github-actions Bot commented May 15, 2026

Uh oh!

github-actions Bot commented May 15, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented May 15, 2026

Uh oh!

vercel Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sanjay-kv commented May 15, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Adez017 commented May 15, 2026

Uh oh!

Adez017 commented May 15, 2026

Uh oh!

Abhash-Chakraborty commented May 16, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Abhash-Chakraborty commented May 16, 2026

Uh oh!

Adez017 commented May 16, 2026

Uh oh!

Adez017 commented May 16, 2026

Uh oh!

Uh oh!

Abhash-Chakraborty commented May 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercel Bot commented May 15, 2026 •

edited

Loading