I want make my first page as login screen

My index.html has main codes but I want when I open the app show me another page as login screen(not idex.html).
How can I do that?

Use a variable in your React state to know if the user is logged in.
Or in the init event’s app, put a var to a boolean value.

In the LoginScreen widget, set the open attribute to this var.

Example in React :

export default class extends React.Component {
constructor(props) {
this.state = {
isLoggedIn: false

// Framework7 parameters here
f7params = {
id: “io.framework7.testapp”, // App bundle ID
name: “Framework7”, // App name
theme: “auto”, // Automatic theme detection
// App routes
on: {
init: () => {
// or modify a boolean here to open the LoginScreen

render() {

  <App params={this.f7params}>
    {/* Statusbar */}
    <Statusbar />

    {/* Left Panel */}
    <Panel left cover themeDark>
      <View url="/panel-left/" />

    {/* Main View */}
    <View id="main-view" url="/" main className="ios-edges" />

    <LoginScreen id="login-screen" opened={!this.state.isLoggedIn}>

Hello, I am experiencing the same problem. How do you deal with it? Thank you!

Hi, I used session on server side. if clients are logged in the app open index page if they expired or not logged in they will see the login page