description: Register and sign in users with identities on the Stacks blockchain
experience: beginners
tags:
- tutorial
images:
large: /images/pages/write-smart-contracts.svg
sm: /images/pages/write-smart-contracts-sm.svg
@ -17,7 +14,10 @@ Authentication provides a way for users to identify themselves to an app while r
Users who register for your app can subsequently authenticate to any other app with support for the [Blockchain Naming System](/build-apps/references/bns) and vice versa.
[See the Todos app tutorial](/build-apps/tutorials/todos) for a concrete example of this functionality in practice.
See the Todos app tutorial for a concrete example of this functionality in practice.
[@page-reference]
| /build-apps/tutorials/todos
## How it works
@ -154,9 +154,20 @@ It will then trigger the `finished` function provided above, which can be used s
## Usage in React Apps
Import the `useConnect` from the `connect` package to integrate transaction signing more seamlessly into React apps.
Import the `useConnect` from the [`connect-react`](https://github.com/blockstack/ux/tree/master/packages/connect-react) package to integrate authentication more seamlessly into React apps.
```
npm install @stacks/connect-react
```
```jsx
import { useConnect } from '@stacks/connect-react';
description: Save and retrieve data for users with Gaia
experience: beginners
tags:
- tutorial
images:
large: /images/gears.svg
sm: /images/gears.svg
@ -17,15 +14,17 @@ Data storage provides a way for users to save both public and private data off-c
Storing data off the Stacks blockchain ensures that apps can provide users with high performance and high availability for data reads and writes without the involvement of centralized parties that could compromise their privacy or accessibility.
[See the Todos app tutorial](/build-apps/tutorials/todos) for a concrete example of this functionality in practice.
See the Todos app tutorial](/build-apps/tutorials/todos for a concrete example of this functionality in practice.
description: Prompt users to sign and broadcast transactions to the Stacks blockchain
experience: beginners
tags:
- tutorial
images:
large: /images/transaction-signing.svg
sm: /images/transaction-signing.svg
@ -11,9 +8,9 @@ images:
## Introduction
This guide explains how to prompt users to sign [transactions](/understand-stacks/transactions) and broadcast them to the Stacks blockchain by implementing the `connect` package of [Stacks.js](https://blockstack.github.io/stacks.js/).
This guide explains how to prompt users to sign [transactions](/understand-stacks/transactions) and broadcast them to the Stacks blockchain by implementing the [`connect`](https://github.com/blockstack/ux/tree/master/packages/connect#stacksconnect) package of Stacks.js.
Transaction signing provides a way for users execute [Clarity smart contracts](/write-smart-contracts/overview) that are relevant to your app then handle the result immediately.
Transaction signing provides a way for users execute [Clarity smart contracts](/write-smart-contracts/overview) that are relevant to your app then handle the result as appropriate.
Users can sign transactions that exchange fungible or non-fungible tokens with upfront guarantees that help them retain control over their digital assets.
@ -23,7 +20,10 @@ There are three types of transactions:
2. Contract deployment
3. Contract execution
[See the public registry tutorial](/build-apps/tutorials/public-registry) for a concrete example of this functionality in practice.
See the public registry tutorial for a concrete example of this functionality in practice.
To serialize your transaction properly, you'll need to provide an appropriate Clarity type for each function argument.
To serialize your transaction properly, you'll need to provide an appropriate [Clarity type](/references/language-types) for each function argument.
These types are named the same as in Clarity and must be passed as strings:
@ -224,7 +224,11 @@ const functionArguments = [
## Usage in React Apps
Import the `useConnect` from the `connect` package to integrate transaction signing more seamlessly into React apps.
Import the `useConnect` from the [`connect-react`](https://github.com/blockstack/ux/tree/master/packages/connect-react) package to integrate transaction signing more seamlessly into React apps.
```
npm install @stacks/connect-react
```
Each transaction signing method is itself available as a function returned by `useConnect` though prefixed with `do` for consistency with React action naming standards:
@ -235,7 +239,7 @@ Each transaction signing method is itself available as a function returned by `u
Use these functions with the same parameters as outlined above. However, you don't have to specify `appDetails` since they are detected automatically if `useConnect` has been used already for authentication.
```tsx
import { useConnect } from '@stacks/connect';
import { useConnect } from '@stacks/connect-react';
const MyComponent = () => {
const { doContractCall } = useConnect();
@ -251,10 +255,6 @@ const MyComponent = () => {
};
```
## Change network
TBD: Instructions for changing between mainnet, testnet and local networks
## Request testnet STX from faucet
You may find it useful to request testnet STX from [the faucet](https://testnet.blockstack.org/faucet) while developing your app with the Stacks testnet.
Apps built with the Stacks blockchain give users control over their digital identities, assets and data.
Unlike most cloud-based apps, they are "decentralized" since they don't depend on any centralized platform, server or database to function. Rather, they use the Stacks blockchain to authenticate users and facilitate read and write transactions for them without any single point of failure or trust.
Unlike most cloud-based apps, they are "decentralized" since they don't depend on any centralized platform, server or database to function. Rather, they use the Stacks blockchain to authenticate users and facilitate read and write requests for them without any single point of failure or trust.
This page provides information on how to build such apps using [Stacks.js](https://github.com/blockstack/stacks.js) and other libraries that make integration of the Stacks blockchain easy for front-end developers.
Three main types of integration are available:
Three main integrations are available:
- **Authentication**: Register and sign in users with identities with the Stacks blockchain
- **Authentication**: Register and sign users in with identities on the Stacks blockchain
- **Transaction signing**: Prompt users to sign and broadcast transactions to the Stacks blockchain
- **Data storage**: Save and retrieve data for users with Gaia
- **Data storage**: Save and retrieve data for users with [Gaia](/build-apps/references/gaia)
All three of these types can be used together to create powerful new user experiences that rival or exceed those of traditional apps – all while protecting your users' digital rights.
All three of these integrations can be used together to create powerful new user experiences that rival or exceed those of traditional apps – all while protecting your users' digital rights.
While integration is possible for any type of app, most of the resources available here are for web developers experienced with JavaScript.
In this tutorial, you'll learn how to work with Stacks Connect when using [Angular](https://angular.io/) as your framework of choice. It builds on what you've learnt in the [Authentication Overview](/authentication/overview).
In this tutorial, you'll learn how to work with Stacks Connect when using [Angular](https://angular.io/) as your framework of choice. It builds on what you've learnt in the [Authentication Overview](/build-apps/guides/authentication).
-> This article presumes some familiarity with [Angular](https://angular.io/), as well as [Reactive Extensions (RxJS)](https://rxjs.dev/).
@ -122,7 +122,7 @@ Here we're using an Rxjs `Subject` to represent a stream of sign in events. `sta
### 4.3 Authentication
First, describe the auth options we need to pass to Connect. [Learn more about `AuthOptions` here](/authentication/overview). Let's modify the default component to look like this:
First, describe the auth options we need to pass to Connect. [Learn more about `AuthOptions` here](/build-apps/guides/authentication). Let's modify the default component to look like this:
@ -224,4 +224,4 @@ The `maxLimit` option is the maximum `limit` field used inside the mongo queries
## Where to go next
Creating models for your application's data is where radiks truly becomes helpful. To learn how to use models, see the [Create and use models](/data-storage/indexing-models) section.
Creating models for your application's data is where radiks truly becomes helpful. To learn how to use models, see the [Create and use models](/build-apps/indexing/models) section.
@ -116,7 +116,7 @@ The `showConnect` function accepts a number of properties within a parameter obj
- The app's `name` and `icon`: provided as strings comprising the `appDetails` object property.
- The `redirectTo` string: used to provide a URL to which the user should be redirected upon successful authentication. The `finished` callback serves a similar purpose by handling successful authentication within a context of a popup window.
- The `userSession` object: used to pass the [scopes](/authentication/overview#scopes) needed by the app.
- The `userSession` object: used to pass the [scopes](/build-apps/guides/authentication#initiate-usersession-object) needed by the app.
Note how the `userSession` object is created at the beginning of this module by leveraging an `AppConfig` object that's first initiated with all relevant scopes.
Mark Hendrickson
4 years ago
Thomas Osmonson