JSF- can't log out

Here is my the template I use in index.xhtml:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    <title><ui:insert name="title">Default title</ui:insert></title>
    <h:outputStylesheet library="default" name="css/style.css" />
</h:head>
<h:body>
    <div id="wrapper" style="width: 800px; align: center">
        <div id="header">
            <div style="float: left">
                <h:graphicImage library="default"
                    name="img/032-ivan-the-terrible-theredlist.jpg" />
            </div>
            <h:form id="loginForm" rendered="#{sessionScope.user == null}">
                    Username: <h:inputText id="username"
                    value="#{userController.user.username}" />
                    Password: <h:inputSecret id="password"
                    value="#{userController.user.password}" />
              <h:commandButton value="Login" action="#{userController.login}" />
            </h:form>
            <h:commandButton value="Logout" action="#{userController.logout}"
                rendered="#{sessionScope.user != null}" />
            <h:outputLink target="register.xhtml"
                rendered="#{sessionScope.user == null}">Register</h:outputLink>
            <h:outputText rendered="#{sessionScope.user != null}"
                value="You are logged in as #{sessionScope.user.username}" />
        </div>
        <div id="menu" style="clear: both">Menu</div>
        <div id="content">
            <ui:insert name="content">Default content</ui:insert>
        </div>
        <div id="footer">Footer</div>
    </div>
</h:body>
</html>

And here is the user controller. Register and log in work fine - but log out won't work for the life of me.

@ManagedBean
@ViewScoped
public class UserController {

    // http://stackoverflow.com/a/10691832/281545
    private User user;
    @EJB // do not inject stateful beans !
    private UserService service;

    public User getUser() {
        return user;
    }

    @PostConstruct
    void init() {
        // http://stackoverflow.com/questions/3406555/why-use-postconstruct
        user = new User();
    }

    public String login() {
        FacesContext context = FacesContext.getCurrentInstance();
        try {
            System.out.println("Pass :" + user.getPassword());
            user = service.find(user.getUsername(), user.getPassword());
            context.getExternalContext().getSessionMap().put("user", user);
            return "/index.xhtml?faces-redirect=true";
        } catch (NoResultException e) {
            context.addMessage(null, new FacesMessage(
                FacesMessage.SEVERITY_ERROR, "Unknown login, please try again",
                null));
            return null;
        }
    }

    public String register() {
        FacesContext context = FacesContext.getCurrentInstance();
        user = service.register(user);
        if (user.getIduser() == 0) {
            context.addMessage(null, new FacesMessage(
                FacesMessage.SEVERITY_ERROR, "Registration failed", null));
            return null;
        }
        context.getExternalContext().getSessionMap().put("user", user);
        return "/index.xhtml?faces-redirect=true";
    }

    public String logout() {
        FacesContext.getCurrentInstance().getExternalContext()
            .invalidateSession();
        return "/index.xhtml?faces-redirect=true";
    }
}

So while the Login button redirects me to the index and displays my login name and Register sends me to the index logged in as the new registered user, when I hit the Logout button I am left staring at You are logged in as <username>. There is only the index page and the registration page in the app

Edit : the index.xhtml:

<ui:composition template="/WEB-INF/xhtml/template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:define name="title">All Times Classics - Welcome</ui:define>
    <ui:define name="content">
        <h1 style="text-align: center">Welcome to All Times Classics</h1>
        You can <a href="register.xhtml">Register</a> if you want to enjoy all
             the goodies we have to offer.
    </ui:define>
</ui:composition>

Solution

The problem is that your <h:commandButton> must be inside a <h:form> in order to work. Check it here:

<h:form id="loginForm" rendered="#{sessionScope.user == null}">
    Username: <h:inputText id="username" value="#{userController.user.username}" />
    Password: <h:inputSecret id="password" value="#{userController.user.password}" />
    <h:commandButton value="Login" action="#{userController.login}" />
</h:form>
<!-- needs to be enclosed by <h:form> -->
<h:form>
<h:commandButton value="Logout" action="#{userController.logout}"
    rendered="#{sessionScope.user != null}" />
</h:form>

You can check for an explanation here: commandButton/commandLink/ajax action/listener method not invoked or input value not updated, reason 1.