profile pic and name from google

Author: milos-prince

next.config.mjs

@@ -3,6 +3,8 @@ import createNextIntlPlugin from 'next-intl/plugin';
 const withNextIntl = createNextIntlPlugin();
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    
+};
 
 export default withNextIntl(nextConfig);

next.config.ts

@@ -1,6 +1,17 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'lh3.googleusercontent.com',
+        port: '',
+        pathname: '*',
+        search: '',
+      },
+    ],
+  },
   /* config options here */
   async headers() {
     return [

public/assets/profile.png

@@ -27,6 +27,7 @@ width:100%;
     text-align: center;
     .profilePic{
       cursor: pointer;
+      border-radius: 50px;
     }
   }
 }

public/assets/profile.svg

@@ -20,6 +20,10 @@
    background: #1683FF;
    border-radius:20px;
    color: #fff;
+  
  }
 }
 
+.profilePic{
+  border-radius: 50px;
+ }

src/app/chat/page.module.scss

@@ -1,20 +1,23 @@
 
+import { useUser } from "@auth0/nextjs-auth0/client";
 import styles from "../chatBubbles.module.scss";
-import Image from 'next/image';
+
+
 
 
 type Props = {
   text:string
 };
 
 export default function ChatOut(props: Props) {
+  const { user } = useUser();
 
   return (
       <div className={styles.chatRowReverse}>
         <div className={styles.chatBubbleOut}>
           <p>{props.text}</p>
         </div>
-        <Image src={'/assets/profile.png'} alt='veri-fact logo' height={40} width={40} />
+        <img src={user?user.picture:"/assets/profile.svg"} alt="me" width="40" height="40" className={styles.profilePic}/>
       </div>
   );
 }

src/app/components/chatBubbles/chatBubbles.module.scss

@@ -1,26 +1,27 @@
 "use client"
 
-import Image from "next/image";
 import AddTab from "../../components/addTab";
 import styles from "../../chat/page.module.scss";
 import { useState } from "react";
 import UserModal from "../modals/userModal";
 import PreferencesModal from "../modals/preferences";
 import ReportModal from "../modals/report";
+import { useUser } from '@auth0/nextjs-auth0/client';
 
 
 export default function ControlColumn() {
   const [accountControlIsOpen, setAccountControlIsOpen] = useState(false)
   const [activeModal, setActiveModal] = useState(0)
+  const { user } = useUser();
 
   return (
     <section className={styles.controlColumn}>
           <div className={styles.tabSection}>
             <AddTab />
           </div>
           <div className={styles.profileWrapper}>
-           <Image src="/assets/profile.png" alt="me" width="50" height="50" className={styles.profilePic} onClick={()=> setAccountControlIsOpen(true)}/>
-           <p>David</p>
+           <img src={user?user.picture:"/assets/profile.svg"} alt="me" width="50" height="50" className={styles.profilePic} onClick={()=> setAccountControlIsOpen(true)}/>
+           <p>{user?user.name.split(" ")[0]:""}</p>
           </div>
           {accountControlIsOpen === true ? <UserModal setAccountControlIsOpen={setAccountControlIsOpen} setActiveModal={setActiveModal} /> : ""}
           {activeModal === 1 ? <PreferencesModal setActiveModal={setActiveModal} />: ""}