# 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](https://attr.sygnal.com/overview/how-to-add-custom-code) 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](https://attr.sygnal.com/sa5-user-accounts/get-logged-in-user-info) and the [Advanced Log-In & Sign-Up Flow](https://attr.sygnal.com/sa5-user-accounts/advanced-log-in-and-sign-up-flow) 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](https://attr.sygnal.com/sa5-user-accounts/get-logged-in-user-info/custom-user-fields) requires *special setup* on your `/access-group` page. Make sure to read that section if you want to access that data.
3. [Access groups](https://attr.sygnal.com/sa5-user-accounts/get-logged-in-user-info/access-groups) 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](https://attr.sygnal.com/sa5-user-accounts/get-logged-in-user-info) 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 %}