How can I access the logged in user name on Netlify?

Question

I'm having trouble understanding how handle functions on Netlify. In particular, I want to access the user's id when they login.

I have enabled identity on my netlify site and I can login and log out.

<button data-netlify-identity-button id="login"></button>

I have created a function identity-login that I think should handle the user's details, but I cannot see how to utilise it on the web-page

// functions/identity-login.js

exports.handler = async function (event, context) {
    const { identity, user } = context.clientContext;
    console.log(identity, user)
return {
    statusCode: 200,
    body: 'hello'
    }
};

The function endpoint is

https://silly-parrot.netlify.app/.netlify/functions/identity-login

I have this in the script on my page, but I don't know how to call it or if it's correct

        async function apiCall() {
            const url = `/.netlify/functions/identity-login`;
            try {
                const response = await fetch(url);
                const data = await response;
                console.log(data)
                return data;
            } catch (err) {
                console.log(err);
            }
        }

What should I do?

Answer 1

I now realise that I was taking the wrong approach. It is not necessary to use the Netlify identity-login event. The netlifyIdentity object provides the necessary functionality for identifying when the user logs in or logs out and to discover whether or not the user is logged in when the page loads (init). The user identity is contained in the user.token.access_token

The following code is within my main js script (you will of course need to access the netlifyIdentity object)

    <script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

And then setup async functions to handle the authorisation events

<script>
    var token = '';
    var logged_in = false;

    async function started() {
        logged_in = false;
        netlifyIdentity.on('init', async user => {
            if(user) {
                token = user.token.access_token;
                logged_in = true;
            }
            console.log('init', logged_in, token);
        })

        netlifyIdentity.on('login', user => {
            if(user) {
                logged_in = true;
                token = user.token.access_token;
            }
            console.log('log in', logged_in, token);
        })

        netlifyIdentity.on('logout', () => {
            token = '';
            logged_in = false;
            console.log('log out', logged_in, token);
        })
    }
    started()
</script>