https://github.com/shairyar/ionic-with-login-signup
User login and registration in Ionic and angular
https://github.com/shairyar/ionic-with-login-signup
angular angular-authentication angular-http-interceptor angular-http-service angular-interceptor angular7 ionic ionic-apps ionic4 mobile-app
Last synced: 2 months ago
JSON representation
User login and registration in Ionic and angular
- Host: GitHub
- URL: https://github.com/shairyar/ionic-with-login-signup
- Owner: shairyar
- Created: 2019-04-02T10:03:19.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-07T06:55:17.000Z (over 7 years ago)
- Last Synced: 2025-06-01T00:44:57.626Z (about 1 year ago)
- Topics: angular, angular-authentication, angular-http-interceptor, angular-http-service, angular-interceptor, angular7, ionic, ionic-apps, ionic4, mobile-app
- Language: TypeScript
- Homepage:
- Size: 1.37 MB
- Stars: 0
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ionic starter with login and registration
This Ionic app contains the user login, signup and an additional route called articles which can only be accessed if you are logged into the app.
## Installation
```sh
npm install
```
Change the URL of your backend inside file `src/app/services/api.service.ts`.
The bankend of this app was created in rails, you can access the backend code [here](https://github.com/shairyar/rails-api-for-ionic). But you should be able to use this app with any backend with little bit of tweeks.
```sh
ionic serve
```
## App Structure
### Pages
* All pages in this app are inside directory `src/app/pages`.
* Pages folder contains 3 folders, `articles`, `authentication`, `home`. Rather than creating every page in a single directory I like to create them modular so they are easy to work with in my opinion.
* As you would have guessed by name `home` is the landing page of the app, `authentication` contains pages related to login and sign up and `articles` contains pages related to displaying the list of articles and individual articles which I will be adding soon.
### Services
* All services live inside directory `src/app/services`.
* Service `alert.service`, constains the code to display the alerts, rather than using the same code over and over again at different places, this is a DRY approach to keep alert in one service and call it where required.
* Service `api.service`, communicates with the backend and sends the response back to the page, this service also contacts the `URL` that you can use to assign your backend api url.
* Service `auth-guard.service`, this service is responsible to grant access to the pages which only logged in user can access.
* Service `auth-interceptor.service`, this service intercepts the http request and appends the `authenticaton token` to it so the backend can use this token for authentication.
* Service `authentication.service`, this service can be used to pull the user object that is saved in local storage. This service also stores the user object in local storage when someone login or register.