Login redirect - best practice?

Questions
1

Hello

When checking if a user is logged id (cookies/session), what is best practice to redirect a not-logged in user to the login page?

Normally I would redirect with php before output of any html code. How to do it with f7 in a secure way, so the page content is protected from logged-out users?

Thank you!
Leo

2

Hi and welcome to f7! I’m not sure if this is the best practice, but I’ll share how I’ve done it in a couple of my apps. Maybe some others have better ideas and this will get the ball rolling and I’ll learn something, too :slightly_smiling_face:

I use a Local Storage key/value pair to store and check a user ID token, and use the the f7 login-screen class for a page to cover the content. Take a look at one of the CLI templates for an example login page in the app.f7 file (app.js.html in previous versions).

In your app.js file, add a handler for the app init event. In there, add a handler for the login button click event and a check for the token in Local Storage - something like this:

app.on( 'init', () => {
  
  // Setup handler for login button
  $$('.login-screen .login-button').on('click', () => {
    let vals = {};
    vals.userName = $$('.login-screen [name="username"]').val();
    vals.userPass = $$('.login-screen [name="password"]').val();	

    // Use the f7 request utility to POST the login data to your server-side authentication code
    app.request( { 
      method: 'POST',
      url: YourLoginURL, 
      dataType: 'text',
      data: vals, 
      crossDomain: false,
    })
    .then( resp => {
      let newToken = resp.data;
      if( newToken && newToken != 'ERROR' ) {
        // Store the token (and maybe userName or whatever you need)
        localStorage.setItem('userToken', newToken );
      } else {
        // clear the password input field so the user can try again
        // you could also show an alert or whatever you like
        $$('.login-screen [name="password"]').val('');
      }
    })
    .catch( err => {
      if( process.env.NODE_ENV !== 'production' ) {
        console.log(err.xhr)
        console.log(err.status)
        console.log(err.message)
      }
      // clear the password here too, but error may persist
      $$('.login-screen [name="password"]').val('');  	
  });

  // Check for stored token and show login screen if not found
  if( localStorage['userToken'] === null ) {
    var loginScreen = app.loginScreen.open( '.login-screen'  );
  }

});

I hope that helps. Please excuse any syntax errors from my copy/paste/edit. Cheers.

1 Like
3

Hello

Thank you for your answer.

The storing and checking of userdste is not the problem. What I am not understanding is how to redirect / organize the app with f7.

  • does the homepage (/) need to be the login page and resirect to app homepage when logged id?

  • or homepage startpage of the app and resirect to login, if not logged in?

The source code of the page should not be visible at all, when not logged in…

Thank you for any advice

Leo

4

Sorry I missed your point. I use f7 to create apps that are “bundled” for offline use on mobile devices, so all content is visible in obfuscated source code. I think that you can do it by not bundling and disable any prefetch. When your app loads, only the index.html and app.f7 (with panels and login page) would be in the DOM until you load a page in the main view. So you could then use the method I described to show login until user is authenticated, then load the home page in main view.

But I haven’t worked that way so hopefully someone else here can help you further if you need it.