Sign in

Quickstart

Add login and user account management to your website in a few easy steps.

Add the UserKit widget for login and registration to your webpage, and then check on the server if a user is logged in.

1. Create your UserKit app

Sign into the dashboard and create a UserKit app.

2. Create an account page

Create a folder named quickstart, and in that folder create a file named account.html containing the UserKit widget. Replace "<YOUR_USERKIT_APP_ID>" with your UserKit app id.

<html>
  <head></head>
  <body>
   	
    <script src="https://widget.userkit.io/widget.js"
    	data-app-id="<YOUR_USERKIT_APP_ID>"
      data-show-on-load="auto">
    </script>
    
  </body>
</html>

The <script> tag inserts the UserKit widget into the page. When you load this page in a web browser you should now see the widget. See below for an example of what you should now see on your page.

📘

You'll need to serve account.html from a server for the widget to work properly, since some browsers don't allow cookies otherwise. On any computer that has Python installed (it's preinstalled on Mac and Linux) you can run the following command from the quickstart directory in your terminal:

python -m SimpleHTTPServer 8080

Then, in your web browser go to http://localhost:8080/account.html to view the page.

For visitors who aren't logged in, the widget will display a login form. If a visitor is logged in, the widget will display the account settings form instead where that user can change their name, email or other account settings. See UserKitWidget Configuration documentation for more details

When a user is logged in, the widget will set a cookie named userkit_auth_token containing a user-session token. You'll use this token to fetch a logged-in user in step 3.

3. Check if a user is logged in

Your server can now check if there is a logged in user associated with a request. It does this by using the user-session token stored in the userkit_auth_token cookie to fetch the user from the UserKit API.

# UserKit Python library: https://github.com/workpail/userkit-python
import userkit

uk = userkit.UserKit("<YOUR_APP_SECRET_KEY>")


def request_handler(request, response):
  token = request.get_cookie("userkit_auth_token")
  user = uk.users.get_current_user(token)
  
  if user:
    # There's a logged in user
    response.write("Welcome, {}".format(user.name))
  else:
    # No logged in user, redirect to login page
    response.redirect("/account.html")

require 'json'
require 'rest-client'

def get_current_user(session_token)
  resource = RestClient::Resource.new(
    'https://api.userkit.io/v1/users/by_token',
    'api', '<YOUR_APP_SECRET_KEY>')
  begin
 		response = resource.get(:'X-User-TOken' => session_token)
    return JSON.parse(response.body)
 	rescue RestClient::Exception
  	return nil
  end
end


def request_handler(request, response)
  token = request.get_cookie("userkit_auth_token")
  user = get_current_user(token)
  
  if (user)
    # There's a logged in user
    response.write("Welcome, " + user.name)
  else
    # No logged in user, redirect to login page
    response.redirect("/account.html")
  end
end

package example

import (
	"fmt"
  // UserKit Go library: https://github.com/workpail/userkit-go
  userkit "github.com/workpail/userkit-go"
)

func HandleSomeRequest(w http.ResponseWriter, r *http.Request) {
  uk := userkit.NewUserKit("<YOUR_APP_SECRET_KEY>")
  
	tokenCookie, _ := r.Cookie("userkit_auth_token")
	user, err := uk.Users.GetUserBySession(tokenCookie.Value)
	if err != nil {
		// No logged in user, redirect to login page
		http.Redirect(w, r, "/account.html", 401)
		return
	}

	// There's a logged in user
	w.Write([]byte("Welcome, " + user.Name))
}

<?php

require_once('UserKit.php');
$uk = new UserKit('<YOUR_APP_SECRET_KEY>');

function request_handler($request, $response)
{
  global $uk;

  $token = $request->get_cookie('userkit_auth_token');
  $user = $uk->users->getCurrentUser($token);
  if ($user != null)
  {
    // There's a logged in user
    $response->write("Welcome, $user->name");
  }
  else
  {
    // No logged in user, redirect to login page
    $response->redirect('/account.html');
  }
}

4. Add Buttons for Login, Account Settings, Registration and Logout

The UserKit widget can also be configured to remain hidden on load by omitting the data-show-on-load property. You can add your own javascript to display a specific widget page such as login, settings, or registration on the click event of a button or link, or to logout the user.

<!-- Omit the data-show-on-load property so widget remains hidden -->
<script src="https://widget.userkit.io/widget.js"
	data-app-id="<YOUR_USERKIT_APP_ID>">
</script>


<!-- Login button -->
<button onclick="UserKitWidget.open('login')">Login</button>

<!-- Signup button -->
<button onclick="UserKitWidget.open('register')">Register</button>

<!-- Account settings button -->
<button onclick="UserKitWidget.open('settings')">Account Settings</button>

<!-- Logout button -->
<button onclick="UserKit.logout()">Logout</button>

To learn more about what functions are available within the widget, see the widget Javascript API documentation.