AndrewJBateman / ionic-angular-authUser

:clipboard: Ionic-Angular used to authenticate users so they can access a simple chat app. Take care if updating.

⚡ Ionic Angular Authentication

• Ionic app to authenticate users so they can access and post messages to a chat board.
• Another great tutorial from Simon Grimm 'Building an Ionic Firebase Chat with Authentication'. Updated to latest Angular and Firebase (compat) versions.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Ionic Angular Authentication
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Firebase Firestore Authentication used to create sign in and log in functions
• Firebase Cloud Firestore stores users and messages in Collections.
• Angular FormBuilder used to reduce the amount of boilerplate needed to build a form
• rxjs map and switchmap operators used

📷 Screenshots

📶 Technologies

• Ionic v6
• Ionic/angular v6
• Angular v15
• Firebase v9 backend database and authentication APIs

💾 Setup

• Create a Firebase project and add email authentication
• Add Firebase config object to environment variables
• npm i to install dependencies
• ionic serve to start the server on _localhost://8100

💻 Code Examples

• extract from chat.page.html by Simon Grimm showing ternery expressions to change chat offset and scss class depending on user

	<ion-grid>
    <ion-row *ngFor="let message of messages | async">
      <ion-col size="9" class="message"
        [offset]="message.myMsg ? 3 : 0"
        [ngClass]="{ 'my-message': message.myMsg, 'other-message': !message.myMsg }">
        <b>{{ message.fromName }}</b><br>
        <span>{{ message.msg }}
        </span>
        <div class="time ion-text-right"><br>{{ message.createdAt?.toMillis().toString() | date:'short' }}</div>
      </ion-col>
    </ion-row>
  </ion-grid>

🆒 Features

• Use of ternery expressions to change chat box color and horizontal offset depending on which user chat item is shown

📋 Status & To-do list

• Status: Complete and working. Problem with dev. console persisting user login id which stops chat from showing user details correctly
• To-do: Fix errors. Find out how to show more than one user email in chat with email username - problem is likely due to storing of user data even after logging out and logging in as a different user.

👏 Inspiration

• Simon Grimm Youtube: 'Building an Ionic Firebase Chat with Authentication'
• Simon Grimm Article: 'Building an Ionic Firebase Chat with Authentication'

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [e-mail]