How to check if a user is logged in / authenticated or not in frontend

Support
1

i am creating some pages(pseudo admin dashboard) meant for authenticated users (in php), but so far i am clueless tracking authentication status / session status of a user. how do i check that? also, how to i kill a session aka log out via front end ?

2

Hi @Cryptospy

Iā€™m afraid youā€™re not entirly understanding how Cockpit works or what itā€™s meant for.
Cockpit is a simple Content Management System (CMS) built for creating websites fast.
Therefore, Cockpit doesnā€™t do any user management for the frontend. The only userhandling handled by Cockpit are the users within Cockpit itself.

However, there might be a way to solve this with Cockpit. Itā€™s not perfect, but it might be enough for your admin panel.
First, please read Cockpits API documentation.
Youā€™ll immediately see the ā€œAPI Tokenā€ section of the documentation. There you can see how API Keys work. With the help of said guide, you can than start to create your login.

I wonā€™t be giving you an exact step by step guide, but Iā€™ll try my best to explain a rough concept to you.

Letā€™s say you have two pages. The login page at /login and your protected dashboard at /dash. When the user goes on your login page, Iā€™d check if they have a Cookie called ā€œAuthorizationā€ (choose the name as you like) stored in their browser with JS. If thatā€™s the case, make a basic API Request such as getting all collections.

GET {YOUR_COCKPIT_URL}/api/collections/get

If the API returns HTTP status code 401 (unauthorized), you know that the stored API Key in said cookie isnā€™t valid and the user has to log in first.
However, if the cookie exists and the API returns HTTP 200, you know that everything is good and you can redirect the user to the Dashboard, for example by using window.location.replace(ā€˜/dashā€™).

Feel free to use this little function for getting a cookie by its name:

/**
 * @param {string} name Cookie name to search for
 */
function getCookieByName(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

For the login you just need one field which is the API Key. No username required. When the user entered his key and clicks login, just execute the same API call. If it returns HTTP 401, the credentials are wrong. If you get HTTP 200, you know the credentials are correct and you can create the cookie called ā€œAuthorizationā€ with the entered API Key as value.

Hereā€™s a little function for creating cookies easily:

/**
 * @param {string} name Cookie name
 * @param {string} value Cookie value
 * @param {string} days Cookie valid time. Set to high value for infinity.
 */
function setCookie(name,value,days) {
    let expires = "";
    if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

On your Dashboard page Iā€™d immediatly do the same checks with JS than you did on the login page. If the user is signed in, do nothing, if he isnā€™t (cookie not set) redirect him to the login page.

This obviously isnā€™t the safest and overall best way of doing things. Usually you would work with JWT to give users expiring Session Tokens based on their login details. But I think itā€™s pretty easy for you to develop and it should work just fine for a pivate project.

Let me know if this helped :rocket:

1 Like