my firebase app with auth as well with the rules set like this below. #my html with AuthUI installed... But it doesn't work! I also inserted this snippet to keep track of auth status: and of course after signing in with the code above it shows me "singed in!!" with my user uid correctly, but still getting 401 unauthroized error.

firebase : 401 unauthorized but login successful(fetching uid successfully)

my firebase app with auth as well with the rules set like this below.

{

"rules": {

".read": "auth!=null",

".write": "auth!=null",

}

}

#my html with AuthUI installed…

<body>
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<table id="developer_list"></table>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.4/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.4/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-database.js"></script>


<script src="https://www.gstatic.com/firebasejs/8.6.4/firebase-auth.js"></script>

<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />


<script>

var config = {apiKey: "xxx",
    authDomain: "xxx.firebaseapp.com",
    databaseURL: "xxx.app",
    projectId: "xxx",
    storageBucket: "xxx.appspot.com",
    messagingSenderId: "xxx",
    appId: "xx:xxx:web:xxx",
    measurementId: "xxx-xxx"
};

/* firebase initializing */
firebase.initializeApp(config); 
const auth = firebase.auth();


auth.onAuthStateChanged((user)=>{console.log("Signed in!!!"+user.uid);});

var messagesRef = firebase.database().ref('forms');


fetch("https://xxx-xx-xx.xx-xx.firebasedatabase.app/xxx.json").then(res =>{res =res.json();return res;}).then(data=>{ for (let i in data){document.getElementById('developer_list').innerHTML += `
                    <tr>
              <!-- <span style="color:red"><td> id: ${i}</td></span>    -->
                        <span id="${i}" style="color:blue"><td> name: ${data[i].name} </td></span>
                        <td> job:  ${data[i].job} </td>
                        </br>
                    </tr>
                    `;}})

    var ui = new firebaseui.auth.AuthUI(firebase.auth());
    
    ui.start('#firebaseui-auth-container', {
    
    signInOptions: [
    
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    
    ],
    
    
    
    signInSuccessUrl: './xyz.html',
    
    });


</script>
</body>

But it doesn’t work!

I also inserted this snippet to keep track of auth status:

auth.onAuthStateChanged((user)=>{console.log("signed in!!"+user.uid);});

and of course after signing in with the code above it shows me “singed in!!” with my user uid correctly,

but still getting 401 unauthroized error.

What’s the problem with the code above?

Answer

It is simply because the fetch logic’s ULR and the purpose of doing so.

If you look at the code closely, the URL ends with .json and that was the main reason it was blocked. (Thank you for pointing that out, “samthecodingman”)

If you get the database data from that URL it means you are trying to use REST API and other logic should be passed through(REST API’s auth)

Normally, you should get your db data(unless you intend to resort to REST API) for your front end, you should use firebase’s code logic(etc through CDN or js module files)

Advertisement

Answer