I have setup tab view application using Framework7 CLI and was able to implement Firebase Auth and set user object to state.
App.jsx
import React from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import { App, Panel, Views, View, Popup, Page, Navbar, Toolbar, NavRight, Link, Block, LoginScreen, List, ListItem, Icon, } from 'framework7-react';
import routes from '../js/routes';
// Configure Firebase.
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx",
databaseURL: "xxx",
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx",
appId: "xxx",
measurementId: "xxx"
};
firebase.initializeApp(firebaseConfig);
// Configure FirebaseUI.
// firebase.auth.GoogleAuthProvider.PROVIDER_ID, firebase.auth.FacebookAuthProvider.PROVIDER_ID
// FirebaseUI config.
const uiConfig = {
// Popup signin flow rather than redirect flow.
signInFlow: 'popup',
signInSuccessUrl: '/',
signInOptions: [
{
provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
recaptchaParameters: {
type: 'image', // 'audio'
size: 'invisible', // 'invisible' or 'compact'
badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
},
defaultCountry: 'LK',
},
],
// tosUrl and privacyPolicyUrl accept either url string or a callback
// function.
// Terms of service url/callback.
tosUrl: '<your-tos-url>',
// Privacy policy url/callback.
privacyPolicyUrl: function () {
window.location.assign('<your-privacy-policy-url>');
},
callbacks: {
// Avoid redirects after sign-in.
signInSuccessWithAuthResult: () => true
}
};
export default class extends React.Component {
constructor() {
super();
this.state = {
// Framework7 Parameters
f7params: {
name: 'uNation', // App name
theme: 'auto', // Automatic theme detection
// App root data
data: function () {
return {
// Demo products for Catalog section
products: [
{
id: '1',
title: 'Apple iPhone 8',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
},
{
id: '2',
title: 'Apple iPhone 8 Plus',
description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
},
{
id: '3',
title: 'Apple iPhone X',
description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
},
]
};
},
// App routes
routes: routes,
// Register service worker
serviceWorker: {
path: '/service-worker.js',
},
},
// Login screen demo data
username: 'Yeshan',
password: 'Perera',
isSignedIn: false,
};
}
render() {
return (
<App params={this.state.f7params}>
{/* Left panel with cover effect*/}
<Panel left cover swipe={true}>
<View>
<Page>
<Navbar title="Navigation" />
{
this.state.isSignedIn ? (
<List>
<ListItem link="/create-group/" view="#view-home" panelClose title="Create Group" />
<ListItem link="/find-group/" view="#view-home" panelClose title="Find Group" />
</List>
) : (
<List>
<ListItem link="/about/" view="#view-home" panelClose title="About" />
<ListItem link="/form/" view="#view-home" panelClose title="Form" />
</List>
)
}
</Page>
</View>
</Panel>
{/* Right panel with reveal effect*/}
<Panel right reveal swipe={true}>
<View>
<Page>
<Navbar title="My Profile" />
{
this.state.isSignedIn ? (
<Block>
<p>Welcome {firebase.auth().currentUser.displayName}! You are now signed-in!</p>
<List>
<ListItem link="#" title="Logout" onClick={() => firebase.auth().signOut()} panelClose>
<Icon slot="media" f7="power" color="primary"></Icon>
</ListItem>
</List>
</Block>
) : (
<Block>
<p>Please login to your account.</p>
<List>
<ListItem link="#" title="Login" loginScreenOpen="#my-login-screen" panelClose>
<Icon slot="media" f7="person_badge_plus" color="primary"></Icon>
</ListItem>
</List>
</Block>
)
}
</Page>
</View>
</Panel>
{/* Views/Tabs container */}
<Views tabs className="safe-areas">
{/* Tabbar for switching views-tabs */}
<Toolbar tabbar labels bottom>
<Link tabLink="#view-home" tabLinkActive iconIos="f7:house_fill" iconAurora="f7:house_fill" iconMd="f7:house_fill" text="Home" />
<Link tabLink="#view-catalog" iconIos="f7:chat_bubble_2" iconAurora="f7:chat_bubble_2" iconMd="f7:chat_bubble_2" text="Discussion" />
<Link tabLink="#view-settings" iconIos="f7:waveform_path" iconAurora="f7:waveform_path" iconMd="f7:waveform_path" text="Referendum" />
</Toolbar>
{/* Your main view/tab, should have "view-main" class. It also has "tabActive" prop */}
<View id="view-home" main tab tabActive url="/" />
{/* Catalog View */}
<View id="view-catalog" name="catalog" tab url="/catalog/" />
{/* Settings View */}
<View id="view-settings" name="settings" tab url="/settings/" />
</Views>
{/* Popup */}
<Popup id="my-popup">
<View>
<Page>
<Navbar title="Popup">
<NavRight>
<Link popupClose>Close</Link>
</NavRight>
</Navbar>
<Block>
<p>Popup content goes here.</p>
</Block>
</Page>
</View>
</Popup>
<LoginScreen id="my-login-screen">
<View>
<Page loginScreen>
<List form>
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
</List>
</Page>
</View>
</LoginScreen>
</App>
)
}
alertLoginData() {
this.$f7.dialog.alert('Username: ' + this.state.username + '<br>Password: ' + this.state.password, () => {
this.$f7.loginScreen.close();
});
}
// Make sure we un-register Firebase observers when the component unmounts.
componentWillUnmount() {
this.unregisterAuthObserver();
}
componentDidMount() {
this.$f7.dialog.preloader();
this.unregisterAuthObserver = firebase.auth().onAuthStateChanged(user => {
var theUser;
if (user) {
console.log("user is logged in!");
theUser = user;
this.setState({
isSignedIn: theUser
});
// User is signed in.
this.$f7.dialog.close();
let userLoggedInToast = this.$f7.toast.create({
text: 'Logged In Successfully!',
closeTimeout: 3000,
});
userLoggedInToast.open();
} else {
// No user is signed in.
console.log("user is not logged in!")
theUser = null;
this.$f7.dialog.close();
let requiredLoginToast = this.$f7.toast.create({
text: 'Please sign in!',
closeTimeout: 3000,
});
requiredLoginToast.open();
}
console.log("onAuthStateChanged :: theUser :: ", theUser);
});
this.$f7ready(() => {
// Call F7 APIs here
});
}
}
Question is How do I access isSignedIn state from home.jsx
Home.jsx
import React from 'react';
import { Page, Navbar, NavLeft, NavTitle, NavRight, Link, Block, BlockTitle, List, ListItem, Row, Col, Button } from 'framework7-react';
export default class extends React.Component {
constructor() {
super();
this.state = {
products: this.$f7.data.products,
}
}
render() {
return (
<Page name="home">
{/* Top Navbar */}
<Navbar sliding={false}>
<NavLeft>
<Link iconIos="f7:menu" iconAurora="f7:menu" iconMd="f7:menu" panelOpen="left" />
</NavLeft>
<NavTitle sliding>xYx</NavTitle>
<NavRight>
<Link iconIos="f7:person_alt" iconAurora="f7:person_alt" iconMd="f7:person_alt" panelOpen="right" />
</NavRight>
</Navbar>
{/* Page content */}
<Block strong>
<p>Please installed. This is an example of tabs-layout application. The main point of such tabbed layout is that each tab
contains independent view with its own routing and navigation.</p>
<p>Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without
navbar like this tab.</p>
</Block>
<BlockTitle>Catalog</BlockTitle>
<List>
{this.state.products.map((product) => (
<ListItem
key={product.id}
title={product.title}
link={`/product/${product.id}/`}
/>
))}
</List>
<BlockTitle>Navigation</BlockTitle>
<List>
<ListItem link="/about/" title="About" />
<ListItem link="/form/" title="Form" />
</List>
<BlockTitle>Modals</BlockTitle>
<Block strong>
<Row>
<Col width="50">
<Button fill raised popupOpen="#my-popup">Popup</Button>
</Col>
<Col width="50">
<Button fill raised loginScreenOpen="#my-login-screen">Login Screen</Button>
</Col>
</Row>
</Block>
<BlockTitle>Panels</BlockTitle>
<Block strong>
<Row>
<Col width="50">
<Button fill raised panelOpen="left">Left Panel</Button>
</Col>
<Col width="50">
<Button fill raised panelOpen="right">Right Panel</Button>
</Col>
</Row>
</Block>
<List>
<ListItem
title="Dynamic (Component) Route"
link="/dynamic-route/blog/45/post/125/?foo=bar#about"
/>
<ListItem
title="Default Route (404)"
link="/load-something-that-doesnt-exist/"
/>
<ListItem
title="Request Data & Load"
link="/request-and-load/user/123456/"
/>
</List>
</Page>
);
}
componentDidMount() {
//
}
}
Please help! Thanks