Keycloak connecting to react and express project/ Cannot protect the routes according to roles

So I have an application that uses React in frontend and Express in backend. From an example I saw, I configured Keycloak in both of these sides. But I am trying to protect the "/" path with the realm role admin. Which means a user who doesn't have the role admin cannot acccess that route. However it doesn't work. I am thinking it's because frontend does the work (if you are a Keycloak user, you can access it wheter you have admin role or not) and backend doesn't get a chance.

In frontend index.js:

let initOptions = {
    url: 'http://localhost:8080/auth', realm: '{realm_name}', clientId: '{client_id}', onLoad: 'login-required'
}

let keycloak = Keycloak(initOptions);

keycloak.init({ onLoad: initOptions.onLoad }).then(function(authenticated) {
    
    
    
    ReactDOM.render(<SnackbarProvider   anchorOrigin={{
        vertical: 'top',
        horizontal: 'right',
    }} maxSnack={3}><App /></SnackbarProvider>, document.getElementById('root'));
    
}).catch(function() {
    alert('failed');
});

In backend app.js:

const Keycloak = require('keycloak-connect');
const session = require('express-session');
var memoryStore = new session.MemoryStore();
var keycloak = new Keycloak({ store: memoryStore });
app.use(session({
    secret:'secret',
    resave: false,
    saveUninitialized: true,
    store: memoryStore
  }));
  app.use(keycloak.middleware());
  

app.get('/', keycloak.protect('realm:admin'), function(req, res){
    console.log("HERE");
});

Here console.log("HERE"); this doesn't write anything to the console. So I am guessing this app.get doesn't get executed.

I do not know how to configure Keycloak to both of them. Any help?