secure html forms throw webAPI

secure html forms throw webAPI

I've spent the past week on surfing the internet and in books reading
about authentication and started to roll out Basic Authentication for my
WebAPI so that HTML clients can let users login/register/logout.
I work on a solution has several projects
Test.WebAPI (just a simple WebAPI)
Test.Website (pure html,JavaScript)
in the (Test.Website) i have html pages and a folder for
accountant(/Accountant) that they can enter the invoices records.
just i want to protect this folder only by giving a user name and password
for each accountant , i have a list of users that doesn't belong to this
role i want deny access for them even if there credential are correct.
is there a straight forward example to send the log in credential to the
WebAPI and store the log in info in (session,cookie,....) and retrieve
account info any where throw javascrip
Please suggest