I'm currently trying to display a page only if the user is present in my app. Right now, the app is pretty bare bones with just an AuthContext and this one page. I had it working in React, but ran into some issues when I switched it over to TS and Next13 - since I'm new to both technologies, any help would be greatly appreciated:
AuthContext.tsx:
'use client';
import { useContext, createContext, useEffect, useState } from 'react';
import {
GoogleAuthProvider,
signInWithPopup,
signInWithRedirect,
signOut,
onAuthStateChanged,
signInWithEmailAndPassword,
User,
} from 'firebase/auth';
import { auth } from '../../../firebaseConfig';
import getUserData from '../api/getUserData';
//-----------------------interfaces-----------------------------------------
interface Props {
children: React.ReactNode;
}
interface SignInCredentials {
email: string;
password: string;
}
export interface AuthContextValues {
googleSignIn: () => void;
emailSignIn: ({ email, password }: SignInCredentials) => void;
logout: () => void;
user: User | null;
userProfileData: any;
loadingUser: boolean;
}
...
page.tsx:
import React from 'react';
import { useUserAuth } from './../../components/shared/context/AuthContext';
type Props = {};
export default function UserPage(props: Props) {
const { user } = useUserAuth();
return <>{user?.uid}</>;
}
The main layout.tsx
import './global.css';
import { AuthContextProvider } from './../components/shared/context/AuthContext';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang='en'>
<body>
<AuthContextProvider>{children}</AuthContextProvider>
</body>
</html>
);
}
and this is the error I am getting:
client.js?234c:691 Uncaught TypeError: (0 , _components_shared_context_AuthContext__WEBPACK_IMPORTED_MODULE_2__.useUserAuth) is not a function
at UserPage (webpack-internal:///(sc_server)/./app/user/page.tsx:13:106)
...
- I tried renaming the useUserAuth method but it didn't change the outcome.
- This entire code worked without TypeScript in React18.