What is the best practice to implement authentication/login screen?

Questions
1

Basically, what I want to do is before a page initializes (before it connects and pulls data from the database to be rendered), I want to know if the user is logged in (has the api token). If not logged in, show the login screen, then after successful login, reload the current route (be it home or a detail page).

Where should I put this “security check”? Is there a “before init” page event?

1 Like
2

Regarding login & authentication, I believe the best practice is to implement an API service. It will insert authorization token into each API request. In case HTTP 401 is captured, it can reset stored auth token and it will wake up the login screen. (In backend, if there is refresh token API, the service can keep your login session active.)

I see in F7 documentation, normally we define a login route. But I would recommend to add an invisible login-screen view, and once auth token is invalid, make the login-screen visible.

The benefits are

  1. The code is very easy to maintain. Just hide the login-screen, if you don’t need it.
  2. After login is successful, you have flexibility.
    a. You can choose to hide the login-screen, so previous screen can be resumed.
    b. You can force navigate to the landing page.

Here is my code snippet in Framework7-vue.
Hope this can help you.
(The only difficulty I still have, is that the login-screen is pop up from bottom. I’d like to have a f7-dive effect as transition)

<template>
  <f7-app v-bind="f7params">
    <!-- todo: figure out how to show page transition -->
    <f7-login-screen :opened="!isAuthTokenValid">
      <my-own-login-page-content />
    </f7-login-screen>

    <f7-views tabs class="safe-areas">
       <f7-view main>...</f7-view>
       ...
    </f7-views>
  </f7-app>
</template>