Ionic Social Sign-On OAuth - SideMenu App

Ionic Social Sign-On OAuth - SideMenu App

Super awesome Ionic Starter for any kind of App!

Free!

Not yet rated
Neven

Neven

Member since 2015

Details

Version:
1.0
Size:
3mb
Ionic:
1.x
Platforms:
iOS, Android
Released:
8 years ago
Updated:
4 years ago
Category:
Starters
Tags:
ios, ionic, cordova, single sign-on, social login, facebook, twitter, instagram, oauth

**GOOGLE PLUS LOGIN IS NO LONGER SUPPORTED

Ionic Single Sign-On SideMenu App

If you want the Social Login Features without the backend then check out Ionic Social Sign-On Basic

If you just want to create users for your app then check out: Ionic Session Login.

This is a barebone full stack application that takes the pain away from creating user accounts, login, logout and session saving as well as allowing Social Login/Signup. It uses Node, Express, MySQL, Sequelize on the backend and Ionic with cordovaOauth on the Frontend. Save a lot of time and jumpstart your app development with this awesome starter kit! Use it as a template or take out the parts you need for your app.

It can easily be modified to use MongoDB or some other DB system. This application creates user accounts from emails and passwords. Passwords are encrypted 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.

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

Features:

  • SideMenu Navigation
  • Dark Midnight Theme (css customizable)
  • Create Users
  • Login
  • Logout
  • Auto login if session is valid
  • Prevent duplicate accounts
  • Login Error Handling
  • Encrypt Passwords
  • Save Login Session
  • Social Login for Facebook, Twitter, Instagram

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"

Social Login

  • You will have to create apps with Facebook and Twitter
  • Use a callback url for local testing (http://localhost/callback)
  • Use TInyURL callback for twitter

Server Instructions

  • Go to the Server folder
  • Install node.js Node.js Installation
  • Install NPM 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
  • Start server with npm start

Usage via http post

Frontend Installation

  • Install Ionic
  • Download Genymotion if you plan to emulate on android
  • Open folder in terminal
  • Install Ionic sudo npm install -g ionic
  • Add platform ionic platform add ios
  • Add platform ionic platform add android
  • cordova plugin add cordova-plugin-inappbrowser
  • cordova plugin add cordova-plugin-whitelist
  • Install ngResource npm install --save ng-resource
  • ionic emulate ios (do not run with livereload)
  • ionic run android (after you have a Genymotion Emulator instance running)

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 serve 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.

karthik

karthik   ·   8 years ago

Hi, I am getting 404 Error: Not Found when I access "http://localhost:3000/socialLogin"

Neven

Neven   ·   8 years ago

Hey those are api calls to be used with POST requests, you cannot access them via browser url (get) request. You have to start the project with ionic emulate ios for example if using iOS or ionic run android for Android.

karthik

karthik   ·   8 years ago

Hi, I keep getting "Service unavailable, make sure you are online" when I run "ionic run android" command. It is failing @ socialLogin function. When I tried with Postman to access to the URL "http://localhost:3000/socialLogin" I get successful response. I can send screenshot if needed

Neven

Neven   ·   8 years ago

Check the common issues heading in the description section of this page. 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.

  ·   just now

{{ reply.comment }}



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

amitsoni

amitsoni   ·   8 years ago

how I will get demo of your app for see working ?

Neven

Neven   ·   8 years ago

I don't have demos but I offer full refunds if you can't get it working.

  ·   just now

{{ reply.comment }}



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

CK

CK   ·   8 years ago

Can we use PostgreSql instead?

Neven

Neven   ·   7 years ago

Yes you could

  ·   just now

{{ reply.comment }}



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

Freddy Urbina

Freddy Urbina   ·   7 years ago

Do you have this script in Ionic 2 ?

Neven

Neven   ·   7 years ago

Sorry no I don't

  ·   just now

{{ reply.comment }}



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

z

z   ·   7 years ago

Hi what was updated 23 days ago? I am unable to build android app now. ionic build --release android /Users/aditya/.nvm/versions/node/v4.4.5/lib/node_modules/ionic/dist/index.js:24 const [xcode, iosDeploy, iosSim,] = yield Promise.all([ ^ SyntaxError: Unexpected token [ at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:373:25) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (/Users/aditya/.nvm/versions/node/v4.4.5/lib/node_modules/ionic/bin/ionic:8:13) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10)

Neven

Neven   ·   7 years ago

Hey, that looks like it's compiling iOS. Maybe try to remove your node_modules folder and run `npm install` again.

  ·   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.

z

z   ·   7 years ago

Hi what was updated 23 days ago? I am unable to build android app now. ionic build --release android /Users/aditya/.nvm/versions/node/v4.4.5/lib/node_modules/ionic/dist/index.js:24 const [xcode, iosDeploy, iosSim,] = yield Promise.all([ ^ SyntaxError: Unexpected token [ at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:373:25) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (/Users/aditya/.nvm/versions/node/v4.4.5/lib/node_modules/ionic/bin/ionic:8:13) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10)

Neven

Neven   ·   7 years ago

Hey, that looks like it's compiling iOS. Maybe try to remove your node_modules folder and run `npm install` again.

  ·   just now

{{ reply.comment }}



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

Freddy Urbina

Freddy Urbina   ·   7 years ago

Do you have this script in Ionic 2 ?

Neven

Neven   ·   7 years ago

Sorry no I don't

  ·   just now

{{ reply.comment }}



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

CK

CK   ·   8 years ago

Can we use PostgreSql instead?

Neven

Neven   ·   7 years ago

Yes you could

  ·   just now

{{ reply.comment }}



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

amitsoni

amitsoni   ·   8 years ago

how I will get demo of your app for see working ?

Neven

Neven   ·   8 years ago

I don't have demos but I offer full refunds if you can't get it working.

  ·   just now

{{ reply.comment }}



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

karthik

karthik   ·   8 years ago

Hi, I am getting 404 Error: Not Found when I access "http://localhost:3000/socialLogin"

Neven

Neven   ·   8 years ago

Hey those are api calls to be used with POST requests, you cannot access them via browser url (get) request. You have to start the project with ionic emulate ios for example if using iOS or ionic run android for Android.

karthik

karthik   ·   8 years ago

Hi, I keep getting "Service unavailable, make sure you are online" when I run "ionic run android" command. It is failing @ socialLogin function. When I tried with Postman to access to the URL "http://localhost:3000/socialLogin" I get successful response. I can send screenshot if needed

Neven

Neven   ·   8 years ago

Check the common issues heading in the description section of this page. 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.

  ·   just now

{{ reply.comment }}



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

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

There are no ratings for this starter yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}