Em đang làm chức năng đăng nhập bằng google mà em bị lỗi khi import StyledFirebaseAuth từ react-firebaseui:
Đây là SignUp page của em :
import firebase from 'firebase';
import React from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
const uiConfig = {
// Popup signin flow rather than redirect flow.
signInFlow: 'redirect',
signInSuccessUrl: '/photos',
// We will display Google and Facebook as auth providers.
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
],
};
function SignIn() {
return (
<div>
<div className="text-center">
<h2>Login Form</h2>
<p>or Login with social accounts</p>
</div>
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
</div>
);
}
export default SignIn;
Đây là App.js của em :
import firebase from 'firebase';
import React, { Suspense, useEffect } from 'react';
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
import './App.scss';
import Header from './components/Header';
import NotFound from './components/NotFound';
import SignIn from './features/Auth/pages/SignIn';
const Photo = React.lazy(() => import('./features/Photo'));
// Configure Firebase.
const config = {
apiKey: 'AAzaSyBtBPoLaqZDA21eFljTJq6K9MrWOp-MbVM',
authDomain: 'my-project-e65d5.firebaseapp.com',
};
firebase.initializeApp(config);
function App() {
// Handle firebase auth changed
useEffect(() => {
const unregisterAuthObserver = firebase.auth().onAuthStateChanged(async user => {
if (!user) {
// user logout
console.log('User is not logged in');
return;
}
console.log('Logged in user : ', user.displayName);
const token = await user.getIdToken()
console.log('Logged in user token: ', token);
});
return () => unregisterAuthObserver(); // unmount
}, [])
return (
<div className="photo-app">
<Suspense fallback={<div><h1>Loading...</h1></div>}>
<BrowserRouter>
<Header />
<Switch>
<Redirect exact from="/" to="/photos" />
<Route path="/photos" component={Photo} />
<Route path="/sign-in" component={SignIn} />
<Route component={NotFound} />
</Switch>
</BrowserRouter>
</Suspense>
</div>
);
}
export default App;
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?