관리 메뉴

심재운 블로그

React 를 통해 Firebase Authentication 사용해 보기 본문

프로그래밍/ReactJS, React Native

React 를 통해 Firebase Authentication 사용해 보기

재우니 2019. 6. 22. 01:49

React 를 통해 Firebase Authentication 사용해 보기


Development setup

Bootstrap a sample project

# bootstrap a new react application
npx create-react-app react-firebase-authentication# access the project
cd ./react-firebase-authentication# start project in development mode
npm start

Firebase setup

There is more but let’s keep it simple for now
Your firebase configuration.
const config = {
    apiKey: "***",
    authDomain: "***",
    databaseURL: "***",
    projectId: "***",
    storageBucket: "***",
    messagingSenderId: "***",
};export default config;
npm install --save firebase react-with-firebase-auth

Code

import withFirebaseAuth from 'react-with-firebase-auth'
import * as firebase from 'firebase/app';
import 'firebase/auth';
import firebaseConfig from './firebaseConfig';
const firebaseApp = firebase.initializeApp(firebaseConfig);
const firebaseAppAuth = firebaseApp.auth();const providers = {
  googleProvider: new firebase.auth.GoogleAuthProvider(),
};
export default withFirebaseAuth({
  providers,
  firebaseAppAuth,
})(App);
const {
  user,
  signOut,
  signInWithGoogle,
} = this.props;
return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      {
        user 
          ? <p>Hello, {user.displayName}</p>
          : <p>Please sign in.</p>
      }
      {
        user
          ? <button onClick={signOut}>Sign out</button>
          : <button onClick={signInWithGoogle}>Sign in with Google</button>
      }
    </header>
  </div>
);
Unauthenticated state
Authenticated state. Most probably your name will be in there instead.
0 Comments
댓글쓰기 폼