In case of Cloud Firestore, you can use a List of Movie objects as below: If you download or clone this repo, in order to make it work, you should follow the instructions given in the official documentation regarding on how to add Firebase to your project. Firebase Authentication using Google Provider.You'll see in the code of this repo, how Firebase Products are working together.īelow you can find the docs for each tehnology that is used in this app: Firebase Products: This application is written entirely in Kotlin using Android Architecture Components and MVVM architecture pattern. Go ahead by changing the src/app/login/ is an open-source project that is built around Firebase Products, especially for learning purposes. If the registration or login is successful and we get back an user object, we immediately route the user forward to our inside area. Since we want to make it easy, we’ll handle both registration and signup with the same form on one page.īut since we added the whole logic already to a service, there’s not much left for us to do besides showing a casual loading indicator or presenting an alert if the action failed. To use those PWA elements, quickly bring up your src/main.ts and import plus call the defineCustomElements function: import Npm i i add that we can already install the Capacitor camera package to capture images later (and the PWA elements for testing on the browser). Now we can finally begin with the actual Ionic app, and all we need is a blank template, an additional page and two services for the logic in our app: ionic start devdacticFire blank -type=angular Starting our Ionic App & Firebase Integration You can learn more about Firebase and security rules inside the Ionic Academy. ![]() Note: For real applications you need to create secure rules for storage and your Firestore database, otherwise people can easily access all your data from the outside! The rules should look like this: rules_version = '2' Īllow read, write: if th != null The last step is enabling Storage in the according menu entry as well, and you can go with the default rules because we will make sure users are authenticated at the point when they upload or read files. This allows us to create user with a standard email/ps combination. Here we can set the default security rules for our database and because this is a simple tutorial we’ll roll with the test mode which allows everyone access.īecause we want to work with users we also need to go to the Authentication tab, click Get started again and activate the Email/Password provider. Leave this config block open just for reference, it will hopefully be copied automatically later by a schematic.Īdditionally we have to enable the database, so select Firestore Database from the menu and click Create database. If it’s a new project, click on the web icon below ” Get started by adding Firebase to your app” to start a new web app and give it a name, you will see the configuration in the next step now. Once you have created the project you can see the web configuration which looks like this: Give your new app a name, select a region and then create your project! Otherwise, make sure you are signed up (it’s free) and then hit Add project inside the Firebase console. If you already got something in place you can of course skip this step. Note: At the time writing there was a problem when running the app on iOS devices - read until the end for a solution! Creating the Firebase Projectīefore we dive into the Ionic app, we need to make sure we actually have a Firebase app configured. To handle our Firebase interaction more easily we will use the AngularFire library version 7 which works with the Firebase SDK version 9 which I used in this post. In this tutorial we will implement the whole flow from connecting our Ionic app to Firebase, adding user authentication and protecting pages after a login to finally selecting an image with Capacitor and uploading it to Firebase cloud storage!Īll of this might sound intimidating but you will see, it’s actually a breeze with these tools.
0 Comments
Leave a Reply. |