firebase로 인증 기능을 만들고 싶었습니다.

firebase는, 간단하게 인증 기능을 사용할 수 있도록(듯이) 되어 있기 때문에, npm로 취해 오면 나중에는 곧바로 할 수 있다. . . 했다. 찾아보면, 확실히 공식에서도 API를 부르는 방법은 있고, Qiita나 다른 블로그 등에도 여러 가지 찾아보면 나왔다. 하지만 내가 복사 활용하기 쉬운 형식으로 구현을 찾을 수 없었기 때문에 사고 팔고한 이야기. 전부 쓰면 알레이므로, 스텝으로 나누어 투고하는 제1탄.

목차

· React와 firebase로 인증 기능 만들기//①
· React와 Redux와 firebase로 인증 기능 만들기//②
・Route로 인증할지 홈 화면으로 천이할지를 나눕니다//③

React와 firebase로 인증 기능 만들기

참고 : 10분 안에 할 수 있는 React+Firebase의 GoogleAuth
간단하고 움직일 때까지 최단을 갈 수있었습니다. 다만, 나는 typescript파이므로, 조금 만났습니다.
1로부터의 순서는 상기의 기사를 참고로 해 주세요. 위와 다른 것은 create-react-app 에 typescript 옵션을 붙인 것 정도입니다. (수수하게 js에서 ts의 변환도 익숙하지 않은 동안 나는 고생했기 때문에 코드 실어 둡니다.
만난 파일은 다음과 같습니다.

firebase.ts

import * as firebase from 'firebase/app';
import 'firebase/auth'

const config = {
    apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
    authDomain: "xxxxx.firebaseapp.com",
    databaseURL: "https://xxxxx.firebaseio.com",
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    projectId: "xxxxx",
    storageBucket: "xxxxx.appspot.com"
};

firebase.initializeApp(config)

export default firebase

App.tsx

import * as React from 'react'
import './App.css'
import firebase from './firebase'

interface UserStatus {
  user: firebase.User | null
}

class App extends React.Component {
  public state: UserStatus = {
    user: null
  }

  public componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      this.setState({ user })
    })
  }

  public login() {
    const provider = new firebase.auth.GoogleAuthProvider()
    firebase.auth().signInWithRedirect(provider)
  }

  public logout() {
    firebase.auth().signOut()
  }

  public render() {
    return (
      <div className="App">
        <p className="App-intro">
          UID: {this.state.user && this.state.user.uid}
        </p>

        {this.state.user ? (
          <button onClick={this.logout}>Google Logout</button>
        ) : (
            <button onClick={this.login}>Google Login</button>
          )}
      </div>
    )
  }
}

export default App

state는, 본래 사용해야 할 interface에 재기입해야 했습니다만, 우선은 실행 가능한 곳까지 가려고 하고 있었으므로 용서해 주세요.
그래서 실행하면,
・로그인 전


· 로그인 후


네, 간단하게 로그인 처리를 할 수 있었습니다. firebase 측에서 로그인 상태를 가져오고 있기 때문에 componentDidMount 안에서 firebase의 메소드 부르는 것만으로 로그인 상태의 유지도 할 수 있다. 얼마나 간단해!

그렇다면 글쎄, 로그인하면 홈 화면으로 이동합니다. 그렇지 않으면 로그인 화면으로 리디렉션하는 화면 흐름을 원합니다.

다만, React와 firebase만으로 구성하고 있기 때문에, 화면이 복수가 되거나 하면, 이 구성이라고 꽤 엄격한 것이 있다. 그럼 역시 Redux 사용하는 것이 좋지 않다는 것으로, 제대로 Redux에 맞는 방법으로 구현해 가자고 하기로 했다.

. . . 솔직히 참고로 한 코드 조금 만지면 빨리라고 핥고 있었지만, 생각한 이상으로 고생했기 때문에, 다음 번 정리합니다.

일단 인증의 동작 확인까지로 이 기사는 끝.

다음 → htps : // 코 m / 테 시마 / ms / 2191 A 9751 A 4 A b16 7 7 c2