This Topic will show you more than just the heading incase you might miss something
Scratch what I said earlier. Though it was good it wasn’t GOOD ENOUGH! this is the real deal here!
We are gonna go through the following
- Register user on Firebase with name and a Profile Image**
- User Log into App with Firebase.
- User wants to change their image or full name.
- How to retrieve your idToken and refreshToken
Register user on Firebase with Full Name and a Profile Image
before we begin ensure that you have created your firebase app and the following rules are set on your firebase. I have added some options commented out.
Then enable and add the necessary elements for the connector on appgyver, this is pretty straight forward.
A. Enable you Firebase Authentication (Login Page will be created automatically)
B. Create your registration page.
C. Create a Data resource
D. Create 3 Data Resources with the same endpoint “https://identitytoolkit.googleapis.com/v1” in your base.
accounts:signUp,
accounts:update
accounts:signInWithPasswordOr you can use HTTP requests when we create the button using POST Method, as we will be using the same URI Endpoints. Please see below, I will create one as an example you create the other two for the next phases D and E.
E. Add in your information for the body and payload, use this link to ref.
In the end of it all you should be looking something like this
F. Let’s create the the page Variables, and add them to your signup page.
E. Set your Image source to the local file path, if you want users to preview the image being uploaded.
G. Time to add some Logic for the Upload File function use the reference below. Resize compress image only needs the file path (this is not a Web app function so don’t use compress image for Web apps)
H. For your Firebase file upload you can use which ever method to add in all your variables for simplicity see image below make sure to test it with a toast to ensure you are getting all the outputs.
To store your image in a particular folder click on the Firebase Storage Upload Files component and select optional inputs. Ensure to add this folder to your Firebase Storage Upload Files component in when updating your user profile or else it won't find the file.
I. You can use the mapping function to bind your page variables for the uploadPhotoFromDevice object with the results from the Firebase Storage Upload Files component.
PLEASE TEST WITH TOATS AND MAKE SURE IT WORKS!
J. Now lets go to the Sign up button Logic!!!
CREATED RECORD - SIGNUP DATA RESOURCE BINDING
This will create an account with firebase for the user.
FIREBASE STORAGE UPLOAD FILES BINDING
Get the pageVariables from the profileImageUpload object. You can use your method this is for simplicity. (We can’t use the automatic binding because this is an Object not a List of Objects)
CREATED RECORD - UPDATE DATA RESOURCE
This will update the account on firebase for the user.displayName = pageVariable //fullname idToken = //idToken from the Signup Records. photoURL = //FORMULA outputs["Firebase Storage upload files"].files[0].downloadUrl returnSecureToken =// true
The other two buttons are straight forward add your password and email variable and a success message or open some page and store the user details into some app Variable, see K.
K.CREATE A USER APP VARIABLE WITH ALL USER INFORMATION.
I stored those in an object called user you can add more stuff once you understand what is going on here…
L.CREATE OR GO TO THE USER PROFILE PAGE
Add the following logic to update your app variable user information.
M. Set the app variables using the Get current firebase user component.
Set the idToken to it’s self as you don’t want to remove it in the event its stored temporarily.
N. OK, take a coffee break!!
This is my ugly user profile page!
- I’ve set my app Variables on Page mount.
- Added the respective user app variables to their the page elements(image,fullname,email etc…).
- The input field and button will be used to update the name, and the image will be clicked on to update the image.
O. THE IMAGE UPDATE LOGIC.
I copied the logic from the image button on the register page up to the (Sign in component)
Remember to edit each component again as they may reset.
- Add a Create record component and use the update Data resource.
P. THE USER NAME UPDATE LOGIC.
Install the Prompt text component or you can add the password field to your page without a prompt or create your own prompt.
The results from the prompt text component will be used for signin.
The user will be required to login to update their details as a security feature!
THIS IS REQUIRED BECAUSE SOMEONE CAN TAKE THEIR PHONE AND UPDATE THEIR DETAILS SINCE GOOGLE FIREBASE HAS PERSISTANT LOGIN INTO THE APP.
- for the Create Record with signin endpoint, add your app variable email and your output of your prompt text “password”.
- The Created record with update endpint, add the same as what you did for image upload.
THE END!!!
ENJOY APPGYVER COMMUNITY!
Will update this post every now and then!
Buy Me a COFFEEE!!!
traviszedward@gmail.com