description: Register and sign in users with identities on the Stacks blockchain
description: Register and sign in users with identities on the Stacks blockchain
experience: beginners
tags:
- tutorial
images:
images:
large: /images/pages/write-smart-contracts.svg
large: /images/pages/write-smart-contracts.svg
sm: /images/pages/write-smart-contracts-sm.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.
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
## 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
## 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
description: Save and retrieve data for users with Gaia
experience: beginners
tags:
- tutorial
images:
images:
large: /images/gears.svg
large: /images/gears.svg
sm: /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.
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
description: Prompt users to sign and broadcast transactions to the Stacks blockchain
experience: beginners
tags:
- tutorial
images:
images:
large: /images/transaction-signing.svg
large: /images/transaction-signing.svg
sm: /images/transaction-signing.svg
sm: /images/transaction-signing.svg
@ -11,9 +8,9 @@ images:
## Introduction
## 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.
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
2. Contract deployment
3. Contract execution
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:
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
## 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:
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.
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
```tsx
import { useConnect } from '@stacks/connect';
import { useConnect } from '@stacks/connect-react';
const MyComponent = () => {
const MyComponent = () => {
const { doContractCall } = useConnect();
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
## 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.
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.
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/).
-> 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
### 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
## 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 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 `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.
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