MomenSherif
commented
1 year ago You will need to prefix your client env with NEXTPUBLIC https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser
omarbakr2020
I was trying to implement GoogleOAuth in my current nextjs project. But when I tried to run it, I got this error on my webpage.
Error: Missing required parameter client_id.Although I have my clientId ready and implemented correctly in my .env file
Here's my env file:
GOOGLE_CLIENT_ID= '611538330153-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'GOOGLE_CLIENT_SECRET= 'GOCSPX-xxxxxxxxxxxxxxxxxxxxxxxxxxx'and here's How I implemented it in layout.tsx:
'use client';import { FC, PropsWithChildren } from 'react';import './globals.css';import { Provider } from 'react-redux';import { ThemeProvider } from 'next-themes';import { GoogleOAuthProvider } from '@react-oauth/google';import store from '../redux/store';const metadata = {title: 'RareCrateBox',description: '<RareCrateBox tag line here>',};const RootLayout: FC<PropsWithChildren> = ({ children }) => {return (<html lang="en"><body><GoogleOAuthProvider clientId={process.env.GOOGLE_CLIENT_ID!}><Provider store={store}><ThemeProvider attribute="class">{children}</ThemeProvider></Provider></GoogleOAuthProvider></body></html>);};export default RootLayout;So, I don't know what exactly might gone wrong, when I try to put clientId as a string, It works, But when I put it as it coming from .env, I get the error. Do you know How I can solve this issue?
Thank you
@MomenSherif