Below, you can see the relevant parts of the [React component](https://reactjs.org/docs/react-component.html)
that triggers this modal in [`src/components/Signin.jsx`](https://github.com/blockstack/stacks-todos/blob/master/src/components/Signin.jsx):
This modal is displayed using the `authenticate` function exported by the `src/stacks.js` module, which organizes all Stacks resources needed across the app:
import { AppConfig, UserSession, showBlockstackConnect } from '@stacks/auth';
import { Person } from '@stacks/profile';
import { Storage } from '@stacks/storage';
```jsx
// src/components/App.jsx
const appConfig = new AppConfig(['store_write', 'publish_data']);
export const userSession = new UserSession({ appConfig });
export const storage = new Storage({ userSession });
export function authenticate(sendToSignIn) {
showBlockstackConnect({
appDetails: {
name: 'Todos',
icon: window.location.origin + '/logo.svg',
},
redirectTo: '/',
finished: () => {
window.location.reload();
},
sendToSignIn: sendToSignIn,
userSession: userSession,
});
}
appDetails: {
name: 'Stacks App',
icon: window.location.origin + '/favicon.ico'
export function getUserData() {
return userSession.loadUserData();
}
export function getPerson() {
return new Person(getUserData().profile);
}
```
This component loads the [`UserSession`](https://blockstack.github.io/stacks.js/classes/usersession.html)
module from `@stacks/auth`
```js
import { UserSession } from '@stacks/auth';
import { appConfig } from '../assets/constants';
The `authenticate` function implements the `showBlockstackConnect` function imported from the `@stacks/auth` library.
// ...
`showBlockstackConnect` triggers the display of a modal that initiates the authentication process for users, one in which they'll authenticate with a _Secret Key_ that's used to encrypt their private data.
const userSession = new UserSession({ appConfig });
```
The `showBlockstackConnect` function accepts a number of properties within a parameter object such as:
This module handles user session operations and is initiated using the
which contains an array of [scopes](/authentication/overview#scopes) that indicate just what permissions
to grant during authentication:
- 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 `sendToSignIn` boolean: used to indicate whether the user should proceed through the "registration" flow (in which they'll be given a newly generated _Secret Key_) or whether they should proceed through the "sign in" flow (in which they'll be prompted to enter an existing _Secret Key_).
- The `userSession` object: used to pass the [scopes](/authentication/overview#scopes) needed by the app.
```js
// src/assets/constants.js
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.
export const appConfig = new AppConfig(['store_write', 'publish_data']);
```
The [`UserSession`](https://blockstack.github.io/stacks.js/classes/usersession.html) and [`AppConfig`](https://blockstack.github.io/stacks.js/classes/appconfig.html) classes are themselves imported from the `@stacks/auth` library.
The `appDetails` and `userSession` objects are joined by the callback function
in configuring Stacks authentication with the `authOptions` object:
In the separate `src/components/App.jsx` component, we see how
`componentDidMount` loads the user's data into the app's state, whether upon redirect post-authentication with `userSession.handlePendingSignIn()` or upon detection of an existing session with `userSession.isUserSignedIn()`:
The data for all todos are saved as JSON to the Gaia hub linked to your Secret Key using the [`putFile`](http://blockstack.github.io/stacks.js/classes/storage.html#putfile) method of the `storage` object in the `src/data-store.js` module:
Note how the `storage` object imported here is originally instantiated in the `stacks` module using `new Storage({ userSession });`, where `userSession` is the same object as used with authentication. It's provided here to ensure that all storage calls are made with the user's Gaia hub.
By default, the `putFile` and `getFile` methods automatically encrypt data when saved and decrypt it when retrieved,
using the user's Secret Key. This ensures that only the user has the ability to view this data.
using the user's _Secret Key_. This ensures that only the user has the ability to view this data.
When deleting a todo, the same `putFile` method is used to save a new JSON array of todos that excludes the deleted todo.
@ -254,7 +232,7 @@ When deleting a todo, the same `putFile` method is used to save a new JSON array
Select "Make public" to make your todos accessible to the public for sharing via URL.
This will call `saveTasks` with the `isPublic` parameter set to `true`, which is used to disable encryption when using `putFile`.
@ -264,38 +242,36 @@ The app will now show all of your todos to anyone who visits the URL displayed w
Select "Sign out" to deauthenticate the app with your Stacks account.
This triggers an event, which
[under the hood](https://github.com/blockstack/stacks-todos/blob/master/src/components/Header.jsx#L47)
calls the [`signUserOut` method](https://blockstack.github.io/stacks.js/classes/usersession.html#signuserout)
of the `UserSession` object.
This calls the [`signUserOut`](https://blockstack.github.io/stacks.js/classes/usersession.html#signuserout) method
of the `userSession` object within `src/components/Header.jsx`.
Now, visit the URL that was provided to you when you made your tasks public. This url is of the format `/todos/:username`, so if your username is `jane_doe.id.blockstack`, the URL would be [`localhost:3000/todos/jane_doe.id.blockstack`](http://localhost:3000/todos/jane_doe.id.blockstack).
Now visit the URL that was provided to you when you made your tasks public. This URL has the format `/todos/:username`, so if your username were `janedoe.id.blockstack`, the URL would be `localhost:3000/todos/jane_doe.id.blockstack`.
When you visit this page, the `TodoList.jsx` component detects that there is a username in the URL.
When there is a username, it calls `fetchTasks`, this time providing the `username` argument. This `username`
option is then passed to `getFile`, which will lookup where that user's tasks are stored.
option is then passed to `getFile`, which will lookup where that user's tasks are stored.
## Sign back in
At this point, you will be logged out from the app but not you'll still have an active session with the Stacks
app itself on [app.blockstack.org](https://app.blockstack.org). Navigate to app.blockstack.org and select "Sign out" there if you want to deauthenticate the Stacks app as well.
Once signed out, select "Sign in" to sign back in with your _Secret Key_.
Once signed out, select "Sign In" to sign back in with your _Secret Key_.
If you've previously deauthenticated the Stacks app, you'll see a prompt to enter your _Secret Key_:
The above screen will be ommitted if you have an active session with the Stacks app already.
Then you'll be presented with the option to select an existing username associated with your _Secret Key_ or
create a new one if you wish to authenticate the app with a different identity and data set:
Mark Hendrickson
4 years ago
