Ionic Login Session

Ionic Login Session

Ionic Login Session - Create users, login, logout, save sessions, reset password

$7.00

Not yet rated
Neven

Neven

Member since 2015

Details

Version:
1.1
Size:
3mb
Ionic:
1.0.0
Platforms:
iOS, Android
Released:
4 years ago
Updated:
3 years ago
Category:
Starters
Tags:
Login, Logout, Create user, sequelize, session, connect, express, node, mysql, ionic, password reset

Ionic Session Login - A barebone full stack application that takes the pain away from creating user accounts, login, logout and session saving. It uses Node, Express, MySQL, Sequelize on the backend and Ionic on the Frontend. Save time and quickstart your app development with this awesome starter kit!

It can easily be modified to use MongoDB or some other DB system. This application creates user accounts from emails and passwords. Passwords are encoded with crypto.

This application does not send or verify emails. It simply creates the accounts. It uses emails as usernames to verify they are unique. This can be easily changed to allow both email and username login.

If you need social oauth login as well then check out my other starter Ionic Social Login Oauth

Check out my other useful starters are here: Great Ionic Starters.

Features:

  • Create Users
  • Login
  • Logout
  • Prevent duplicate accounts
  • Encrypt Passwords
  • Save Login Session
  • Password Reset (New)

The server dependencies:

  • "body-parser": "~1.12.4",
    • "connect": "^3.4.0",
    • "cookie-parser": "~1.3.5",
    • "debug": "~2.2.0",
    • "express": "~4.12.4",
    • "express-session": "^1.12.1",
    • "morgan": "~1.5.3",
    • "mysql": "^2.9.0",
    • "node-gyp": "^3.2.1",
    • "q": "^1.4.1",
    • "sequelize": "^3.14.1",
    • "serve-favicon": "~2.2.1",
    • "jade": "~1.9.2"

Server Instructions

  • Go to the Server folder
  • Install node.js Node.js Installation
  • In the folder run npm install
  • Install Express Server npm install express --save
  • Install Express Session npm install express-session
  • Install Connect npm install connect
  • Download & Install MySQL
  • Create a db: 'mydbname' (you can change this).
  • To create the db you can run mysql -u root -e "create database mydbname";
  • In Server app.js you have to update your own mysql parameters: dbname , user, password, url and port.
  • npm install mysql
  • Install Sequelize npm install sequelize
  • Install mysql option npm install --save mysql
  • Install nodemailer npm install nodemailer
  • Start server with npm start

Usage via http post

FrontEnd Instructions

  • Install Ionic
  • Download Genymotion if you plan to emulate on android
  • open Frontend folder in terminal
  • Install Ionic sudo npm install -g ionic
  • add platforms ionic platform add ios
  • add platforms ionic platform add android
  • ionic emulate ios (do not run with livereload)
  • ionic run android (after you start genymotion emulator instance)

Running as a website

  • [Enable CORS requests](http: ubberchickin.com/origin-is-not-allowed-by-access-control-allow-origin-ionic/)

Password Reset Setup

Node.js App Deployment Tutorial

  • It is highly recommended you use Heroku.com as your app hosting service
  • Read my tutorial on [How to Deploy Node.js app to Heroku](http: ubberchickin.com/how-to-deploy-your-ionic-node-js-app-to-heroku/)

Common Issues

  • If you're using Android Emulator or testing on a Smartphone, you cannot access your computer's localhost. In the Frontend/www/js/services.js you have to replace all the localhost references with your computer external ip such as 192.x.x.x. Find out what your computer's IP is and put it instead of localhost. Make sure the smartphone and your computer are on the same wifi network or your server is accessible globally.
  • If you try to run with ionic server or ionic run -l you will encounter Cross Origin Issues (CORS). You can read about it here.

Payment Information

  • The payment on this site is processed by Stripe.com and sometimes your bank will decline the charges if they don't recognize it. You can contact your bank or try a different card.

Support

  • Leave a comment if you get stuck on anything
  • If you email me directly it might get caught in the spam filter
  • And Kudos if you leave a Rating! =)

Stay in Touch



Icon made by Freepik from www.flaticon.com is licensed under CC BY 3.0

Hey there! You'll need to log in before you can leave a comment here.

Oliver Kuchendorf

Oliver Kuchendorf   ·   4 years ago

Great script and very complete. Even for beginner understandable and clean coded. Since I am a beginner in node servers I had a hard time running the server at first on my shared hosting machine. There was missing lots of modules which are not mentioned in the installation help of the script. Just do all the author writes but send a simple "node install" command before you use "npm start", this has solved all the issues for me since node installed a couple more modules which was needed for the server to work. I recommend this script for everybody who want to save time with login etc. process. thanks to the author for the great script.

Neven

Neven   ·   4 years ago

Hey Oliver, thanks for finding the issue with the installation. I will add it to the instructions. You can always contact me when you get stuck, and please leave a rating =) many thnx.

Erico

Erico   ·   4 years ago

Hi Neven, I've got stuck in the Server installation. After the "node start" command it seams it is not finding the app.js. The error message is : Error: Cannot find module '../app'

Neven

Neven   ·   4 years ago

Hey Erico, do you mean `npm start` ?

Neven

Neven   ·   4 years ago

Hey, looks like maybe the app.js didn't get uploaded. I just made a new zip file can you download the new version and try again? Make sure app.js exists in the Server folder.

Erico

Erico   ·   4 years ago

Ok Neven. Thank you. I'll give it a try right now.

Erico

Erico   ·   4 years ago

I worked. The server 'npm start' command worked.

Mk99

Mk99   ·   4 years ago

Hi, this is probably a stupid question but how can I use a side menu instead of the tabs?

Neven

Neven   ·   4 years ago

@Mark Hey, not a stupid a question haha. This starter doesn't depend on the type of navigation, all of the login elements are in the login.html. The login logic is in controllers.js and services.js. You could create a new basic project with `ionic start myApp sidemenu` and then move all the stuff from my template that it needs from the js folder and the login.html. The sidemenu template from ionic is very plain and you most likely won't like it at first until you style it. I will have to take some time and make a new separate starter with a side menu since it seems to be a popular one.

erick

erick   ·   3 years ago

just to make sure, Save Session mean. if app closed or smartphone rebooted. when user launch app again, they will not see login page, is that right? thanks..

Neven

Neven   ·   3 years ago

@Erick yes in theory restarting your phone should keep the session alive, but localStorage isn't guaranteed and sometimes the OS will clean it up (http://ionicframework.com/docs/v2/api/platform/storage/LocalStorage/) . If you need this to work every time I would suggest changing it to localeForage which should be more reliable. (https://github.com/mozilla/localForage). It's something I've been meaning to do for my own projects but haven't done so yet.

Miguel Clement

Miguel Clement   ·   3 years ago

@neven, everytime I close the app the user is required to login again. how would you recommend I go about keeping users logged in indefinitely?

Neven

Neven   ·   3 years ago

@Miguel Hey looks like the server side has the checkSession but the Frontend never included the code to check session. I can add this for you, just give me a couple days and I will update the project.

Neven

Neven   ·   3 years ago

All, I will update the project to always check if the user is logged in. Will be available in a couple days.

Neven

Neven   ·   3 years ago

Ok, I added a new version. You can try it now.

Miguel Clement

Miguel Clement   ·   3 years ago

@Neven I actually purchased the social login starter (I then removed social realizing it was not necessary) what can I do to receive the updates?

Neven

Neven   ·   3 years ago

I will have to update that project as well, might take me a little while. Will let you know if I can get it done this week.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Neven

Neven   ·   3 years ago

@MiguelClement I have updated the Social Login app as well now so it checks the user session on start.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Neven

Neven   ·   3 years ago

Added a feature to reset your password via email.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

P

P   ·   3 years ago

@Neven how do I download the template? I didnt receive the link yet.

P

P   ·   3 years ago

@Neven - nm i found it.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

P

P   ·   3 years ago

@Neven for this app, Is it possible to setup/configure mysql hosted on MAMP server instead of installing on local hard disk?

P

P   ·   3 years ago

@Neven nm figured it out. You have server and client side code in separate folders. Suppose if I wanted to integrate some third-party components (e.g. firebase etc) how would I go about doing it? Also I see that the Create Account button remains disabled until I enter input in both fields, which doesn't make sense.

Neven

Neven   ·   3 years ago

Hey, right now there isn't a separate create account page so the accounts are created directly from the login page. This is why input is required. I don't know about integrating with firebase, but I have instructions on how to deploy to heroku on my blog.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Muhammet

Muhammet   ·   3 years ago

I could't make it work. It says 404 for every web request, and service unavailable on ionic serve --lab

Neven

Neven   ·   3 years ago

That's because you are not launching it as an app but running it as a website and getting cross origin errors. You can still run it as a website but you have to configure your ionic.project file to allow cross origin requests. You can read my how to on the blog here: http://rubberchickin.com/origin-is-not-allowed-by-access-control-allow-origin-ionic/

Neven

Neven   ·   3 years ago

And If you are running it on the smartphone then you have to change all the localhosts into ip addresses of your server. You can read the common issues section.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Wael Abedrabbo

Wael Abedrabbo   ·   3 years ago

Hi thank you for this great app i want my app to connect to online server http://wwww.myweb.com what should i configure and what files should i upload to my server thank you and best regards

Neven

Neven   ·   3 years ago

You will have to install NodeJS on your server. And then move the www folder from the ui into your server/public folder. There is a tutorial how to setup node on a server here: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-14-04

Wael Abedrabbo

Wael Abedrabbo   ·   3 years ago

sorry link not working

Neven

Neven   ·   3 years ago

Ok. You can just google how to install nodeJS on your own webserver. You will need to do the same things you do on your localhost. Some hosting sites won't let you install nodeJS, this is why I recommend using heroku. You can still use a custom domain name when you deploy to heroku.com

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Codesalsa

Codesalsa   ·   3 years ago

Hi Neven One question before I buy this plugin. Will it support PHP with MYSQL in backend? Please let me know so that I will decide to buy accordingly.

Neven

Neven   ·   3 years ago

The backend is written in node & express. So you would have to rewrite it to work with php.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

remy sibiet

remy sibiet   ·   3 years ago

Hello, I have a problem with session: I have added « console.log(req.session) » in login post function, just before the res.send. I have added the same console.log in logout post function, at first line. When I login then logout I see that req.session in logout is a new one, without user and username value. So it not works. Why ? How to access to existing session ? Thanks for your help

Neven

Neven   ·   3 years ago

Can you confirm you are testing the UI on a smartphone? You should add this console.log(JSON.stringify(req.session.user)); to print out the session. I tested it and they match.

Neven

Neven   ·   3 years ago

you add that line to the app.js in the Server folder

remy sibiet

remy sibiet   ·   3 years ago

I had done tests using Chrome. It works with emulator. Why session doesn't works when we use chrome? Thanks so much !

Neven

Neven   ·   3 years ago

It's because you are probably running on two separate ports. You have to move the UI www folder into the the Server public folder. read the end of this blog post: https://rubberchickin.com/how-to-deploy-your-ionic-node-js-app-to-heroku/

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

remy sibiet

remy sibiet   ·   3 years ago

Hello, I have a problem with session: I have added « console.log(req.session) » in login post function, just before the res.send. I have added the same console.log in logout post function, at first line. When I login then logout I see that req.session in logout is a new one, without user and username value. So it not works. Why ? How to access to existing session ? Thanks for your help

Neven

Neven   ·   3 years ago

Can you confirm you are testing the UI on a smartphone? You should add this console.log(JSON.stringify(req.session.user)); to print out the session. I tested it and they match.

Neven

Neven   ·   3 years ago

you add that line to the app.js in the Server folder

remy sibiet

remy sibiet   ·   3 years ago

I had done tests using Chrome. It works with emulator. Why session doesn't works when we use chrome? Thanks so much !

Neven

Neven   ·   3 years ago

It's because you are probably running on two separate ports. You have to move the UI www folder into the the Server public folder. read the end of this blog post: https://rubberchickin.com/how-to-deploy-your-ionic-node-js-app-to-heroku/

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Codesalsa

Codesalsa   ·   3 years ago

Hi Neven One question before I buy this plugin. Will it support PHP with MYSQL in backend? Please let me know so that I will decide to buy accordingly.

Neven

Neven   ·   3 years ago

The backend is written in node & express. So you would have to rewrite it to work with php.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Wael Abedrabbo

Wael Abedrabbo   ·   3 years ago

Hi thank you for this great app i want my app to connect to online server http://wwww.myweb.com what should i configure and what files should i upload to my server thank you and best regards

Neven

Neven   ·   3 years ago

You will have to install NodeJS on your server. And then move the www folder from the ui into your server/public folder. There is a tutorial how to setup node on a server here: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-14-04

Wael Abedrabbo

Wael Abedrabbo   ·   3 years ago

sorry link not working

Neven

Neven   ·   3 years ago

Ok. You can just google how to install nodeJS on your own webserver. You will need to do the same things you do on your localhost. Some hosting sites won't let you install nodeJS, this is why I recommend using heroku. You can still use a custom domain name when you deploy to heroku.com

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Muhammet

Muhammet   ·   3 years ago

I could't make it work. It says 404 for every web request, and service unavailable on ionic serve --lab

Neven

Neven   ·   3 years ago

That's because you are not launching it as an app but running it as a website and getting cross origin errors. You can still run it as a website but you have to configure your ionic.project file to allow cross origin requests. You can read my how to on the blog here: http://rubberchickin.com/origin-is-not-allowed-by-access-control-allow-origin-ionic/

Neven

Neven   ·   3 years ago

And If you are running it on the smartphone then you have to change all the localhosts into ip addresses of your server. You can read the common issues section.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

P

P   ·   3 years ago

@Neven for this app, Is it possible to setup/configure mysql hosted on MAMP server instead of installing on local hard disk?

P

P   ·   3 years ago

@Neven nm figured it out. You have server and client side code in separate folders. Suppose if I wanted to integrate some third-party components (e.g. firebase etc) how would I go about doing it? Also I see that the Create Account button remains disabled until I enter input in both fields, which doesn't make sense.

Neven

Neven   ·   3 years ago

Hey, right now there isn't a separate create account page so the accounts are created directly from the login page. This is why input is required. I don't know about integrating with firebase, but I have instructions on how to deploy to heroku on my blog.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

P

P   ·   3 years ago

@Neven how do I download the template? I didnt receive the link yet.

P

P   ·   3 years ago

@Neven - nm i found it.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Neven

Neven   ·   3 years ago

Added a feature to reset your password via email.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Neven

Neven   ·   3 years ago

@MiguelClement I have updated the Social Login app as well now so it checks the user session on start.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Miguel Clement

Miguel Clement   ·   3 years ago

@Neven I actually purchased the social login starter (I then removed social realizing it was not necessary) what can I do to receive the updates?

Neven

Neven   ·   3 years ago

I will have to update that project as well, might take me a little while. Will let you know if I can get it done this week.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Neven

Neven   ·   3 years ago

Ok, I added a new version. You can try it now.

Neven

Neven   ·   3 years ago

All, I will update the project to always check if the user is logged in. Will be available in a couple days.

Neven

Neven   ·   4 years ago

Hey Oliver, thanks for finding the issue with the installation. I will add it to the instructions. You can always contact me when you get stuck, and please leave a rating =) many thnx.

Miguel Clement

Miguel Clement   ·   3 years ago

@neven, everytime I close the app the user is required to login again. how would you recommend I go about keeping users logged in indefinitely?

Neven

Neven   ·   3 years ago

@Erick yes in theory restarting your phone should keep the session alive, but localStorage isn't guaranteed and sometimes the OS will clean it up (http://ionicframework.com/docs/v2/api/platform/storage/LocalStorage/) . If you need this to work every time I would suggest changing it to localeForage which should be more reliable. (https://github.com/mozilla/localForage). It's something I've been meaning to do for my own projects but haven't done so yet.

erick

erick   ·   3 years ago

just to make sure, Save Session mean. if app closed or smartphone rebooted. when user launch app again, they will not see login page, is that right? thanks..

Neven

Neven   ·   4 years ago

@Mark Hey, not a stupid a question haha. This starter doesn't depend on the type of navigation, all of the login elements are in the login.html. The login logic is in controllers.js and services.js. You could create a new basic project with `ionic start myApp sidemenu` and then move all the stuff from my template that it needs from the js folder and the login.html. The sidemenu template from ionic is very plain and you most likely won't like it at first until you style it. I will have to take some time and make a new separate starter with a side menu since it seems to be a popular one.

Mk99

Mk99   ·   4 years ago

Hi, this is probably a stupid question but how can I use a side menu instead of the tabs?

Erico

Erico   ·   4 years ago

I worked. The server 'npm start' command worked.

Erico

Erico   ·   4 years ago

Ok Neven. Thank you. I'll give it a try right now.

Neven

Neven   ·   4 years ago

Hey, looks like maybe the app.js didn't get uploaded. I just made a new zip file can you download the new version and try again? Make sure app.js exists in the Server folder.

Neven

Neven   ·   4 years ago

Hey Erico, do you mean `npm start` ?

Erico

Erico   ·   4 years ago

Hi Neven, I've got stuck in the Server installation. After the "node start" command it seams it is not finding the app.js. The error message is : Error: Cannot find module '../app'

Oliver Kuchendorf

Oliver Kuchendorf   ·   4 years ago

Great script and very complete. Even for beginner understandable and clean coded. Since I am a beginner in node servers I had a hard time running the server at first on my shared hosting machine. There was missing lots of modules which are not mentioned in the installation help of the script. Just do all the author writes but send a simple "node install" command before you use "npm start", this has solved all the issues for me since node installed a couple more modules which was needed for the server to work. I recommend this script for everybody who want to save time with login etc. process. thanks to the author for the great script.

Neven

Neven   ·   3 years ago

@Miguel Hey looks like the server side has the checkSession but the Frontend never included the code to check session. I can add this for you, just give me a couple days and I will update the project.

Hey there! You'll need to log in and purchase the add-on before you can leave a rating here.

There are no ratings for this starter yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}