現在ポートフォリオサイトを作成しています。
https://github.com/takoyan33/manga-kousatu.net
https://manga-kousatu-net.vercel.app/
実現したいこと
現在Next.jsでポートフォリオで作成していおり、
TypeScriptで型付けをしたいと考えています。
発生している問題・エラーメッセージ
現在Firebase authtacation の登録処理をanyを使わずに記載したいと考えています。
しかし、下記のエラーが発生しています。
プロパティ 'accessToken' は型 'User' に存在しません。
処理自体はうまくできていおり、
const SignIn = () => { signInWithEmailAndPassword(auth, email, password) .then((response: any) => {
だとうまくできます。
type User = {
accessToken: string;
}
など試してみたのですが、上手くいかず、どう設定すればよいか分かっていない状況です。
分かる方がいればよろしくお願いします。
import { app } from "../../../firebaseConfig"; import { getAuth, signInWithEmailAndPassword, GoogleAuthProvider, signInWithPopup, } from "firebase/auth"; import { useState } from "react"; import { useRouter } from "next/router"; import { useEffect } from "react"; import Button from "@mui/material/Button"; import Box from "@mui/material/Box"; import TextField from "@mui/material/TextField"; import Head from "next/head"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faEnvelope } from "@fortawesome/free-solid-svg-icons"; export default function Loginauth() { const auth = getAuth(); const router = useRouter(); const googleProvider = new GoogleAuthProvider(); const [email, setEmail] = useState<string>(""); const [password, setPassword] = useState<string>(""); const SignIn = () => { signInWithEmailAndPassword(auth, email, password) .then((response) => { sessionStorage.setItem("Token", response.user.accessToken); console.log(response.user); router.push("/home"); }) .catch((err) => { alert("ログインできません"); }); }; const SignInWithGoogle = () => { signInWithPopup(auth, googleProvider).then((response) => { console.log(response.user); sessionStorage.setItem("Token", response.user.accessToken); router.push("/home"); }); }; return ( <> <Box component="form" className="flex justify-center max-w-7xl " noValidate autoComplete="off" > <div> <label className="text-center my-4">メールアドレス*</label> <br></br> <TextField id="outlined-basic" label="sample@gmail.com" className="m-auto w-80" variant="outlined" onChange={(event) => setEmail(event.target.value)} /> <br></br> <br></br> <label className="text-center my-4">パスワード(8文字以上)*</label> <br></br> <br></br> <TextField id="outlined-basic" label="Password" variant="outlined" type="password" className="m-auto w-80" onChange={(event) => setPassword(event.target.value)} /> <br></br> <br></br> <Button variant="outlined" onClick={SignIn} className="m-auto w-80 my-8" > ログイン </Button> <br></br> <br></br> <Button variant="outlined" onClick={SignInWithGoogle} className="m-auto w-80" > Googleでログイン </Button> </div> </Box> </> ); }
回答1件
あなたの回答
tips
プレビュー