title: Firebase database permission denied error
body: <p>I am making an app that displays events. I created a page which shows the summaries of the events with a link to the full event details. I read in the docs that database objects can be retrieved by adding .json to the URL (<a href="https://firebase.google.com/docs/reference/rest/database/" rel="nofollow noreferrer">https://firebase.google.com/docs/reference/rest/database/</a>).  My app uses JavaScript to construct the links to each object, however when the link is clicked, I get a permission denied error even when I am signed into the app as a user. Does anyone know how to resolve this? 
  I have a demo of the app here on Codepen: <a href="https://codepen.io/heresnova/pen/VWoxXr" rel="nofollow noreferrer">https://codepen.io/heresnova/pen/VWoxXr</a>. Note you'll have to refresh the page after logging into the app to view the content. </p>
  
  <p>Basically what I'm trying to do is create a "read more" link to an expanded view of the full database object. Does anyone know how to do this with Firebase?</p>
  
  <p>Here's the relevant JavaScript code:</p>
  
  <pre><code>var events = firebase.database().ref("events");
  
      // displays event listings 
      events.on('value', function(snapshot) {
          snapshot.forEach(function(childSnapshot) {
          var eventkey = childSnapshot.key;
          var eventdata = childSnapshot.val();
          var browseId = eventkey.toString(); 
          var showcards = document.getElementById('showcards');
  
          // listing data to be displayed
          var browseTitle = childSnapshot.val().title;
          var browseDate = childSnapshot.val().starttime;
          var browseCity = childSnapshot.val().city;
          var browseCost = childSnapshot.val().price;
          var dbUrl = "https://authtest-54513.firebaseio.com/events/";
          var addJson = ".json";
          var evUrl = dbUrl+eventkey+addJson;
            // event card
          var card = document.createElement('div');
          card.setAttribute('class', 'card'); // assign class card to div for css styling
          showcards.appendChild(card);
  
  
            // display all listings on page
          var cardtitle = document.createElement('p'); 
            cardtitle.setAttribute('id', 'evdata'); 
          cardtitle.innerHTML = browseTitle + " " + " " + browseCity + " " + "&amp;pound;" + browseCost;
          card.appendChild(cardtitle);  
  
            var showUrl = document.createElement('a');
            showUrl.setAttribute('href', evUrl);
           // showUrl.innerHTML = "more...";
            showUrl.innerHTML = evUrl;
            card.appendChild(showUrl);
  
          console.log(eventdata);
    });  // end foreach childSnapshot function
  }); // end events.on function
  </code></pre>
  
  <p>My security rules:</p>
  
  <pre><code>{
    "rules": {
      ".read": "auth != null",
      ".write": "auth != null",
        "user-events": {
          ".indexOn": ["uid"],
          "$uid": {
            ".read": "auth != null &amp;&amp; auth.uid == $uid",
            ".write": "auth != null &amp;&amp; auth.uid == $uid"
          }
      }
    }
  }
  </code></pre>