feat: add user supporter status to authentication flow and update Card component logic

Author: medyo

src/components/Elements/Card/Card.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import React, { useEffect, useState } from 'react'
 import { AdvBanner } from 'src/features/adv'
+import { useAuth } from 'src/features/auth'
 import { DesktopBreakpoint } from 'src/providers/DesktopBreakpoint'
 import { MobileBreakpoint } from 'src/providers/MobileBreakpoint'
 import { CardPropsType } from 'src/types'
@@ -27,6 +28,7 @@ export const Card = React.forwardRef<HTMLDivElement, RootCardProps>(
   ) => {
     const { icon, label, badge } = meta
     const [canAdsLoad, setCanAdsLoad] = useState(true)
+    const { user } = useAuth()
 
     useEffect(() => {
       if (!withAds) {
@@ -65,7 +67,7 @@ export const Card = React.forwardRef<HTMLDivElement, RootCardProps>(
           {badge && <span className="blockHeaderBadge">{badge}</span>}
         </div>
 
-        {canAdsLoad && withAds && (
+        {canAdsLoad && withAds && !user?.isSupporter && (
           <div className="ad-wrapper blockRow">
             <AdvBanner />
           </div>

src/features/auth/types/index.ts

@@ -4,4 +4,5 @@ export type User = {
   connectedAt?: string
   imageURL?: string
   streak?: number
+  isSupporter?: boolean
 }

src/providers/AuthProvider.tsx

@@ -38,15 +38,19 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
         : GithubAuthProvider.credential(token)
 
     return signInWithCredential(firebaseAuth, authProvider)
-      .then((userCredential) => {
+      .then(async (userCredential) => {
         const user = userCredential.user
 
+        const idToken = await user.getIdTokenResult()
+        const isSupporter = Boolean(idToken.claims?.['supporter'])
+
         initState({
           user: {
             id: user.uid,
             connectedAt: new Date().toISOString(),
             name: user.displayName || 'Anonymous',
             imageURL: user.photoURL || '',
+            isSupporter: isSupporter,
           },
           providerId: authProvider.providerId,
         })