Security question: secret env var as prop

[enchidn4]

Summary

Hey guys, I need some help for the following case.

Suppose I have the following structure

src
    |-  app
          ...
          |- contact
                |- page.jsx 
     ...                                 
    |-  components
          |- Contact.jsx 
    |-  lib
          |- 3rdPartyApi.js

I also have an .env file with a secret key

SECRET_KEY=longsecretkeywith32chars

Now in page.jsx, which is a server component I have

//src/app/page.jsx

import Contact from "@/components/Contact";

export default async function Page({ params }) {

  return (
    <Contact
      mySecretKey={process.env.SECRET_KEY}
    />
  );
}
//src/app/page.jsx

import Contact from "@/components/Contact";

export default async function Page({ params }) {

  return (
    <Contact
      mySecretKey={process.env.SECRET_KEY}
    />
  );
}

The Contact Component is a client Component

//component/Contact.jsx

"use client";
...
import { sendMail } from "@/lib/3rdPartyApi";


export default function Contact({mySecretKey}) {

  function handleSubmit() {
     sendMail(mySecretKey)
  }


return(
 ...
     <button onClick={() => handleSubmit()} >
        ....
     </button>

 ...

)}
//component/Contact.jsx

"use client";
...
import { sendMail } from "@/lib/3rdPartyApi";


export default function Contact({mySecretKey}) {

  function handleSubmit() {
     sendMail(mySecretKey)
  }


return(
 ...
     <button onClick={() => handleSubmit()} >
        ....
     </button>

 ...

)}

Now the question is: can the value of SECRET_KEY (which is passed as prop) here somehow be exposed/intercepted/read by a malicious client activity (so that they will get longsecretkeywith32chars)?
If so, how would that work?
How would a more secure solution look like?

Thanks for your help!

Additional information

No response

Example

No response

[icyJoseph]

No this is not good. The secret will be transparently visible to the browser.

Formally speaking, in the snippet below, because Contact is a client component, the boundary is crossed, and the secret is leaked.

    <Contact
      mySecretKey={process.env.SECRET_KEY}
    />

You can create a server function with use server, and that internally invokes the sendMail function server side, in pseudo-code:

'use server'
import { sendMail } from "@/lib/3rdPartyApi";

export async function doSendMail() {
    await sendMail(process.env.FOO_BAR);
}

That ought to do.