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

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

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

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

React.js

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

解決済

TypeScriptでaccessTokenの型エラーが出る

Shmupeiii
Shmupeiii

総合スコア95

TypeScript

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

React.js

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

1回答

0リアクション

0クリップ

225閲覧

投稿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> </> ); }

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

TypeScript

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

React.js

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