How to Maintain User Session after a User closes the Framework7 App

Questions
1

Hi, I would like to maintain the user session even after a user closes the Framework 7 App.
If I logged in my application on my mobile, it should always be logged in whenever I try to access that application. I don’t Know how to start.
Then I check with a request to my API if the user has the permission and then I show him the index…. but If the user close the app and then start it again I have to do the login. It’s not a good behaviour

Please can someone assist me to resolve this urgently.

2

You will consider using localstorage and a session management library in your API (backend) like JWT. Log the user in, generate token in your backend using say JWT, include it in the session/login response from the server. Persist it in web memory, (Remember in Cordova, you are literally loading your Single Page App in a browser - behind the scenes) using localstorage. For as long as the token key is not null and exists in localstorage, the user is logged in. Consider using the Framework7 route hooks at your initial route to assert the condition, or sent the user to log in page again.

It is important to note that you are supposed to send in your ajax headers, an authorization property, whose value is the token from localstorage, this way you can verify whether it is your server that generated the token and proceed to fulfill what the request is meant for.

$.ajax({
    type: "POST", //GET, POST, PUT
    url: '/authenticatedService' 
    data: yourData, 
    contentType: contentType,           
    beforeSend: function (xhr) {   //Include the bearer token in header
        xhr.setRequestHeader("Authorization", 'Bearer '+ localStorage.token);
    }
}).done(function (response) {
    //Response ok. process reuslt
}).fail(function (err)  {
    //Error during request
});

Consider reading more on this, I don’t know whether this should disappoint you, but unless you have say an SQLite DB installed on the phone alongside your app and don’t rely on a backend API instead, this remains the only way.

Cheers

2 Likes
3

Thanks for your response.

I am using Framework7 with PHP, AJAX and MYSQL Database.
I am still confused how to implement this.

Please kindly assist me with any tip.

Thanks

4

Do you intend to run this app on a mobile phone natively? Or is it a web app?

5

I intend to run it on a Mobile (Android Device)

6

Here you have an article on php and JWT

you just need the part for creating a JWT and then validate that JWT

2 Likes
7

Thanks so much. But apart from using JWT, can I also use myApp.formStoreData(formId, formJSON) to save and maintain the user session even after a user closes the Framework 7 App

?

8

Dont know what you mean when you say maintain the session. You can save your forms and user credential in localstorage. Then when the user open thenapp again, you retrieve the credentials and make the login.I think the limit is 5mb. More than enough to save forms without imgs.

1 Like
9

Thanks so much.

Please how can I save forms and user credential in localstorage using Framework7, MYSQL Database, PHP and AJAX so that when the User opens the Mobile App Again, the User Credentials can be retrieved automatically and the User is redirected to the Dashboard.

10

As put before, if your intention is to have a native mobile app, MySQL and PHP will have to be hosted separately on a server, away from your mobile phone. AJAX will instead help you to connect with that backend service.

Learn about JSON, and APIs first. That’s the main problem.
You will do away with all the confusion after you understand how to consume an API, how to make one.
Framework7 is frontend framework, it doesn’t know your PHP or MYSQL.

11

I know how to consume an API.
Also I have successfully hosted the PHP and Mysql on a separate server.
The only challenge I have now is how to save the User Credentials in Local Storage in Framewotk 7 so that when the User opens the Mobile App again after initial Successful Login, the User will be redirected to the Dashboard.

Thanks

12 
// After success login to app save credentials in local storage
app.request.promise.get('login.php', { user: 'user', password: 'password' })
  .then(function (res) {
    if (res) {
      localStorage.setItem('user-credentials', JSON.stringify({ user: 'user', password: 'password' }))
      app.view.main.router.navigate('/')
    } 
    else alert('wrong credentials')
  })

// then after user open app again, retrive credentials and go to home

let userCredentials = JSON.parse(localStorage.getItem('user-credentials'))

app.request.promise.get('login.php', { user: userCredentials.user, password: userCredentials.password })
  .then(function (res) {
    if (res) {
      app.view.main.router.navigate('/')
    } 
  })
13

Thanks. I will try the above code.

14

Please I am new to Framework 7. I need your assistance on
How to Access Phone Contacts and Also take Camera Pictures in framework 7 Mobile App Development

?

I mean How can I open Phone Contacts of an Android Mobile Phone and Also open and take Camera Pictures by clicking on an button or icon in Framework 7 Mobile App using JavaScript, Ajax
and Html

15

I think it’s NOT a good idea to store a password in the localStorage. Yoy will have security risk.

The use of authentication service is to provide a credential token, and store the token instead of the password…

16

@Asharak
He is asking to use local storage.

If you read my first answer I suggest to use JWT.