How to get authenticated user? - extjs

Question

I am following the 'Getting started tutorial' and I have this simple Ext.js code:
Ext.define('TutorialApp.view.Main', {
extend: 'Ext.container.Container',
requires:[
'Ext.tab.Panel',
'Ext.layout.container.Border'
],
xtype: 'app-main',
layout: {
type: 'border'
},
items: [{
region: 'west',
xtype: 'panel',
title: 'west',
width: 150
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Center Tab 1'
}]
}],
listeners: {
afterrender: function () {
alert('hi there')
}
}
});
I'd like to know how to get the "alert" pop up to say, "Hi there red" where "red" is the user that has just successfully performed Basic authentication.

Answer 1

It depends on whether your Basic authentication is performed on accessing the whole page, or only on your client side application accessing a restricted area on the same domain via AJAX.
In the first case you will need the server side to pass the Basic auth username to the client (there is no way JavaScript can access it otherwise). This may be done by getting the server insert a custom bit of JavaScript containing the username (and potentially other useful stuff that only the server knows):
<script type="text/javascript">
window.CONTEXT = {
// other useful stuff
username: 'red'
}
</script>
With the above in place, your alert will be simply:
alert('Hi there ' + CONTEXT.username)
In the second case (sending Basic auth credentials via AJAX) your client side will know the username in the first place, so upon authentication success it will know what name to show in the alert. The actual code will depend on the component doing the authentication, but a good approach would be to have a singleton for it that will have methods for performing authentication, telling whether user is authenticated and what the username is. So your alert will simply call it:
alert('Hi there ' + TutorialApp.Auth.getUsername())