cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Error while connecting sap UI5 Application in BAS using Firebase

Akash_Kanyadhara
Discoverer

3 weeks ago

0 Kudos
181

this is the error

Akash_Kanyadhara_1-1745632834543.png

Akash_Kanyadhara_3-1745632936546.pngAkash_Kanyadhara_4-1745632960093.pngAkash_Kanyadhara_5-1745632974857.png

 

 

This is Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>App Title</title>
    <style>
        html, body, body > div, #container, #container-uiarea {
            height: 100%;
        }
    </style>
    <script
        id="sap-ui-bootstrap"
        src="resources/sap-ui-core.js"
        data-sap-ui-theme="sap_horizon"
        data-sap-ui-resourceroots='{
            "firebaselogin": "./"
        }'
        data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true"
        data-sap-ui-frameOptions="trusted"
    ></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
    Firebase SDK for Analytics -->
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-analytics.js"></script>
    <!-- Add Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-storage.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-functions.js"></script>
    <script>
        // Your Firebase configuration
        var firebaseConfig = {
            apiKey: "",
                authDomain: "",
                projectId: "",
                storageBucket: "",
                messagingSenderId: "",
                appId: ""
        };
               firebase.initializeApp(firebaseConfig);
    </script>
</head>
<body class="sapUiBody sapUiSizeCompact" id="content">
    <div
        data-sap-ui-component
        data-name="firebaselogin"
        data-id="container"
        data-settings='{"id" : "firebaselogin"}'
        data-handle-validation="true"
    ></div>
</body>
</html>

This is component.js

sap.ui.define([
    "sap/ui/core/UIComponent",
    "firebaselogin/model/models",
    "firebaselogin/js/Firebase"
], (UIComponent, models, Firebase) => {
    "use strict";

    return UIComponent.extend("firebaselogin.Component", {
        metadata: {
            manifest: "json",
            interfaces: [
                "sap.ui.core.IAsyncContentCreation"
            ]
        },

        init() {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // set the device model
            this.setModel(models.createDeviceModel(), "device");

            // enable routing
            this.getRouter().initialize();

            //set Firebase Model
            this.setModel(Firebase.initializeFirebase(), "fbModel");

            
        }
    });
});

this is firebase.js

sap.ui.define([
    "sap/ui/model/json/JSONModel",
], function (JSONModel) {
    "use strict";
    return {
        // Firebase-config retrieved from the Firebase-console
        initializeFirebase: function () {
            // Replace with your config here
            

            const firebaseConfig = {
                apiKey: "",
                authDomain: "",
                projectId: "",
                storageBucket: "",
                messagingSenderId: "",
                appId: ""
               
              };


            // Initialize Firebase with the Firebase-config
            firebase.initializeApp(firebaseConfig);

            // Create a Firestore reference
            const firestore = firebase.firestore();

            // Create a Authentication reference
            const fireAuth = firebase.auth();

            // Get Firebase Instance
            const oFirestore = firebase.firestore;

            // Create a Fire Storage reference
            const fireStorage = firebase.storage();

            // Create a Fire Functions reference
            const fireFunctions = firebase.app().functions('asia-east2');

            // Firebase services object
            const oFirebase = {
                firestore: firestore,
                fireAuth: fireAuth,
                oFirestore: oFirestore,
                fireStorage: fireStorage,
                fireFunctions: fireFunctions
            };

            // Create a Firebase model out of the oFirebase service object which contains all required Firebase services
            var fbModel = new JSONModel(oFirebase);

            // Return the Firebase Model
            return fbModel;
        }
    };
});

this is view1.view.xml

<mvc:View controllerName="firebaselogin.controller.View1"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <pages>
                <Page id="page" title="Email and Password Login Integration in SAP UI5 using Google Firebase">
                    <content>
                        <VBox height="100%" alignItems="Center">
                            <HBox height="100%" alignItems="Center">
                                <Image height="100px" class="sapUiLargeMarginEnd"
                                    src="https://www.loc-online.co.uk/berkshire-loc/wp-content/uploads/sites/23/2020/06/Screenshot-2020-05-28-at-16.35.37-266x300.png"/>
                                <IconTabBar id="idIconTabBarNoIcons" expanded="{device>/isNoPhone}" selectedKey="mail" class="sapUiResponsiveContentPadding">
                                    <items>
                                        <IconTabFilter text="Email Login" key="mail">
                                            <VBox id="idMailDetails">
                                                <Label design="Bold" text="Enter Registered Email ID" required="true"/>
                                                <Input width="300px" id="idu_admin" required="true" placeholder="username@mail.com" submit="onEmailSignin"/>
                                                <Label design="Bold" text="Enter Password" required="true"/>
                                                <Input width="300px" id="idp_admin" required="true" type="Password" placeholder="*****" submit="onEmailSignin"/>
                                                <HBox>
                                                    <Button width="145px" class="sapUiTinyMarginEnd" text="Sign In" press="onEmailSignin"/>
                                                    <Button width="145px" text="Reset" press="onReset"/>
                                                </HBox>
                                            </VBox>
                                        </IconTabFilter>
                                    </items>
                                </IconTabBar>
                            </HBox>
                        </VBox>
                    </content>
                </Page>
                </pages>
</mvc:View>

this is view1 controller

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], (Controller) => {
    "use strict";

    return Controller.extend("firebaselogin.controller.View1", {
        onInit() {
            
        },
        onEmailSignin: function (oEvent) {
            var that = this;
            sap.ui.core.BusyIndicator.show();
            var email = this.byId("idu_admin").getValue();
            var password = this.byId("idp_admin").getValue();
            var errorMessage = "";
            // Create a Fireauth Auth reference
            var oModel = this.getView().getModel("fbModel").getData();
            var fireAuth = oModel.fireAuth;
            // var firestoreData = oModel.firestore;
            fireAuth.signInWithEmailAndPassword(email, password).then(function (usersigned) {
                sap.ui.core.BusyIndicator.hide();
                MessageBox.success("You are Logged in!");
                that.onReset();
            }).catch(function (error) {
                sap.ui.core.BusyIndicator.hide();
                // Handle Errors here.
                errorMessage = error.message;
                MessageBox.error(errorMessage);
            });
        },

        onReset: function (oEvent) {
            this.byId("idu_admin").setValue("");
            this.byId("idp_admin").setValue("");
        }
    });
});


 

Know the answer?

Help others by sharing your knowledge.

Answer

Need more details?

Request clarification before answering.

Show replies
Show replies

Accepted Solutions (0)

Answers (2)

Answers (2)

Rithika
Product and Topic Expert
Product and Topic Expert
3 weeks ago

Hi Akash,

I have few workarounds you can try to resolve this issue

You are initializing Firebase twice:

  • Once directly in your index.html (using this block):

     
    firebase.initializeApp(firebaseConfig);

  • Then again in your firebase.js inside intializeFirebase().
    Firebase doesn't allow calling initializeApp() more than once with the same app name ("[DEFAULT]").

  • Try removing the initialization from index.html and keep it in the firebse.js file
  • Also with the controlId issue seen in your console, I assume there might be an issue with your manifest file, which is why the view/target is not loading

Please let me know if this works, or need more assistance

Show replies
Show replies
junwu
SAP Champion
SAP Champion
3 weeks ago
0 Kudos

how about removing <pages> in your view

Show replies
Show replies
Ask a Question