# Quick Start | SA5 User Accounts

## How to Add the Library  <a href="#step-1---add-the-library" id="step-1---add-the-library"></a>

{% hint style="warning" %}
**IMPORTANT** \
We've made some enhancements to SA5 Core in v5.5.0. \
If you are already using other SA5 Libs, please make certain to upgrade them to at least v5.5.0 as well to ensure cross-compatibility.&#x20;
{% endhint %}

[Add this script](/overview/how-to-add-custom-code.md) to the **site wide** custom code **HEAD** area of your site.&#x20;

{% code overflow="wrap" %}

```html
<!-- Sygnal Attributes 5 | User Accounts --> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.6.0/dist/css/webflow-membership.css"> 
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.6.0/dist/nocode/webflow-membership.js"></script>
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['getMembershipConfig', 
  (config) => {
    // Apply any configuration settings here
    // such as access groups 
    return config;
  }]);
</script>
```

{% endcode %}

Once you've added the library, both the [User Info](/sa5-user-accounts/get-logged-in-user-info.md) and the [Advanced Log-In & Sign-Up Flow](/sa5-user-accounts/advanced-log-in-and-sign-up-flow.md) features are available to use.

## Current User Info Quick Start

{% hint style="success" %}
The **User Info** library can be considered as 3 feature sets.&#x20;

1. Basic user info like name, email, and opt-in is automatically accessible once the library is installed.&#x20;
2. [Custom user fields](/sa5-user-accounts/get-logged-in-user-info/custom-user-fields.md) requires *special setup* on your `/access-group` page. Make sure to read that section if you want to access that data.
3. [Access groups](/sa5-user-accounts/get-logged-in-user-info/access-groups.md) also requires a special setup. Make sure to read those pages if you want access to your access group data.&#x20;
   {% endhint %}

**User info** works automatically behind the scenes, and gathers data *when a User first logs in*.&#x20;

To access User Info, you can use the [data-binding feature](/sa5-user-accounts/get-logged-in-user-info.md) on an element, such as a form field. Add a custom attribute of `wfu-bind` with the [DSD](https://attr.sygnal.com/webflow-membership/logged-in-user-info#accessing-user-information) you want to the element you want data-bound.&#x20;

For example, this custom attribute setting on an INPUT element will data-bind the user's email;

`wfu-bind` = `$user.email`

{% hint style="info" %}
See SA5's full list of **data source descriptors** for [User Info](https://attr.sygnal.com/webflow-membership/logged-in-user-info#accessing-user-information) here.&#x20;
{% endhint %}

If you want to use the user's info in custom code, use the [callback option](https://attr.sygnal.com/webflow-membership/logged-in-user-info#step-3-optional-add-custom-code-to-use-user-info-specially), and you get the full [user object](https://attr.sygnal.com/webflow-membership/logged-in-user-info/the-user-object).

{% hint style="warning" %}
Users who are already logged in will need to log out, and log in again in order for the library to refresh their data.&#x20;
{% endhint %}

## Log-In & Sign-Up Flow Quick Start

**We use the same library above for this module.**

However it requires configuration which is done through a configuration callback.

See here for the code to [configure log-in & sign-up flow](https://attr.sygnal.com/webflow-membership/advanced-log-in-and-sign-up-flow#step-1---add-the-library).&#x20;

Add the custom attributes for the features you need, described in each feature separately. &#x20;

## SA5 Library Developers

For SA5 library developers, use the extended syntax to support [Sygnal Devmode](https://devmode.sygnal.com/) and [Sygnal DevProxy](https://engine.sygnal.com/devproxy).  These make it easier to develop and test code changes with Webflow sites.&#x20;

{% code overflow="wrap" %}

```html
<!-- Sygnal Attributes 5 | Memberships --> 
<link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.6.0/dist/css/webflow-membership.css"
  dev-href="http://127.0.0.1:4000/dist/css/webflow-membership.css"
  group="SA5 User Accounts"  
  > 
<script defer 
  src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.6.0/dist/nocode/webflow-membership.js" 
  dev-src="http://127.0.0.1:4000/dist/nocode/webflow-membership.js"
  group="SA5 User Accounts"  
  ></script>
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-user-accounts/quick-start.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.