質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

605閲覧

TypeScriptでaccessTokenの型エラーが出る

Shmupeiii

総合スコア105

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/07/26 15:38

現在ポートフォリオサイトを作成しています。
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> </> ); }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

signInWithEmailAndPassword()の返り値はUserCredential型であり、そのプロパティであるuserUser型ですが、そもそもUser型はaccessTokenというプロパティを持っていません。

投稿2022/07/26 17:30

airRnot1106

総合スコア165

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問