You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The `@feathersjs/authentication-client` module allows you to easily authenticate against a Feathers server. It is not required, but makes it easier to implement authentication in your client by automatically storing and sending the access token and handling re-authenticating when a websocket disconnects.
18
+
The `@feathersjs/authentication-client` module allows you to easily authenticate a Feathers client against a Feathers server. It is not required, but makes it easier to implement authentication in your client by automatically storing and sending the access token and handling re-authenticating when a websocket disconnects.
19
19
20
-
## Configuration
21
-
22
-
-`storage` (default: `localStorage` if available, `MemoryStorage` otherwise) - The storage to store the access token. For React Native use `import { AsyncStorage } from 'react-native'`
23
-
-`path` (default: '/authentication') - The path of the authentication service
24
-
-`locationKey` (default: `'access_token'`) - The name of the window hash parameter to parse for an access token from the `window.location`. Usually used by the OAuth flow.
25
-
-`locationErrorKey` (default: `'error') - The name of the window hash parameter to parse for authentication errors. Usually used by the OAuth flow.
26
-
-`jwtStrategy` (default: `'jwt'`) - The access token authentication strategy
27
-
-`storageKey` (default: `'feathers-jwt'`) - Key for storing the token in `storage`
28
-
-`header` (default: `'Authorization'`) - Name of the accessToken header
29
-
-`scheme` (default: `'Bearer'`) - The HTTP header scheme
30
-
- Authentication (default: `AuthenticationClient`) - Allows to provide a [customized authentication client class](#customization)
The following options are available for `app.configure(authentication(options))`:
41
+
42
+
-`storage` (default: `localStorage` if available, `MemoryStorage` otherwise) - The storage to store the access token. For React Native use `import { AsyncStorage } from 'react-native'`
43
+
-`path` (default: '/authentication') - The path of the authentication service
44
+
-`locationKey` (default: `'access_token'`) - The name of the window hash parameter to parse for an access token from the `window.location`. Usually used by the OAuth flow.
45
+
-`locationErrorKey` (default: `'error') - The name of the window hash parameter to parse for authentication errors. Usually used by the OAuth flow.
46
+
-`jwtStrategy` (default: `'jwt'`) - The access token authentication strategy
47
+
-`storageKey` (default: `'feathers-jwt'`) - Key for storing the token in `storage`
48
+
-`header` (default: `'Authorization'`) - Name of the accessToken header
49
+
-`scheme` (default: `'Bearer'`) - The HTTP header scheme
50
+
- Authentication (default: `AuthenticationClient`) - Allows to provide a [customized authentication client class](#customization)
51
+
50
52
<BlockQuotetype="info">
51
53
52
54
Verifying or parsing the token on the client usually isn't necessary since the server does that on JWT authentication and returns with the token information but it can still be done manually with the [jwt-decode](https://www.npmjs.com/package/jwt-decode) package.
@@ -68,7 +70,7 @@ try {
68
70
69
71
<BlockQuotetype="danger">
70
72
71
-
`app.reAuthenticate()` has to be called when you want to use the token from storage. __There’s no need to call it more than once__, so you’d typically only do it once when the application initializes. When successful, all subsequent requests will send their authentication information automatically.
73
+
`app.reAuthenticate()` has to be called when you want to use the token from storage. **There is no need to call it more than once**, so you’d typically only do it once when the application initializes. When successful, all subsequent requests will send their authentication information automatically.
72
74
73
75
</BlockQuote>
74
76
@@ -94,7 +96,7 @@ try {
94
96
```
95
97
96
98
-`data {Object}` - of the format `{strategy [, ...otherProps]}`
97
-
-`strategy {String}` - the name of the strategy to be used to authenticate. Required.
99
+
-`strategy {String}` - the name of the strategy to be used to authenticate. Required.
98
100
-`...otherProps {Properties} ` vary depending on the chosen strategy. Above is an example of using the `local` strategy.
99
101
100
102
## app.logout()
@@ -103,13 +105,13 @@ Removes the access token from storage on the client. It also calls the `remove`
103
105
104
106
## app.get('authentication')
105
107
106
-
`app.get('authentication') -> Promise` is a Promise that resolves with the current authentication information. For most strategies this is the best place to get the currently authenticated user:
108
+
`app.get('authentication') -> Promise` is a Promise that resolves with the current authentication information. For most strategies this is the best place to **get the currently authenticated user**:
Copy file name to clipboardExpand all lines: docs/api/client.md
+27-46Lines changed: 27 additions & 46 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,28 +6,26 @@ outline: deep
6
6
7
7
One of the most notable features of Feathers is that it can also be used as the client. In contrast with most other frameworks, it isn't a separate library; instead you get the exact same functionality with a client and on a server. This means you can use [services](./services.md) and [hooks](./hooks.md) and configure plugins. By default, a Feathers client automatically creates services that talk to a Feathers server.
8
8
9
-
In order to connect to a Feathers server, a client creates [Services](./services.md) that use a REST or websocket connection to relay method calls and allow listening to [events](./events.md) on the server. This means the [Feathers application instance](./application.md) is usable the exact same way as on the server.
9
+
In order to connect to a Feathers server, a client creates [Services](./services.md) that use a REST or websocket connection to relay method calls and - for a real-time transport like Socket.io - allow listening to [events](./events.md) on the server. This means the [Feathers application instance](./application.md) is usable the exact same way as on the server.
10
10
11
11
Modules most relevant on the client are:
12
12
13
13
-`@feathersjs/feathers` to initialize a new Feathers [application](./application.md)
14
-
-[@feathersjs/rest-client](./client/rest.md) to connect to services through [REST HTTP](./express.md).
14
+
-[@feathersjs/rest-client](./client/rest.md) to connect to services through REST HTTP provided by [Koa](./koa.md) or [Epress](./express.md).
15
15
-[@feathersjs/socketio-client](./client/socketio.md) to connect to services through [Socket.io](./socketio.md).
16
16
-[@feathersjs/authentication-client](./authentication/client.md) to authenticate a client
17
17
18
18
<BlockQuotetype="warning"label="Important">
19
19
20
-
You do not have to use Feathers on the client to connect to a Feathers server. The client [REST client](./client/rest.md) and [Socket.io client](./client/socketio.md) chapters also describe how to use the connection directly without Feathers on the client side. For details on authentication, see the [Authentication client chapter](./authentication/client.md).
20
+
You do not have to use Feathers on the client to connect to a Feathers server. The client [REST client](./client/rest.md) and [Socket.io client](./client/socketio.md) chapters also describe how to use the connection directly without Feathers on the client side.
21
21
22
22
</BlockQuote>
23
23
24
-
This chapter describes how to set up Feathers as the client in Node, React Native and in the browser with a module loader like Webpack or Browserify or through a `<script>` tag. The examples are using [the Socket.io client](./client/socketio.md). For other connection methods see the chapters linked above.
24
+
This chapter describes how to set up Feathers as the client in Node, React Native and in the browser with a module loader like Webpack or Parcel or through a `<script>` tag. The examples are using [the Socket.io client](./client/socketio.md). For other connection methods see the chapters linked above.
25
25
26
-
<BlockQuotetype="warning"label="Important">
27
-
28
-
Feathers can be used on the client through the individual modules or the [@feathersjs/client](#feathersjsclient) module. The latter combines all modules mentioned above into a single file. Use with modules and a loader like Webpack, Parcel etc. is recommended.
26
+
## Typed client
29
27
30
-
</BlockQuote>
28
+
A Feathers application generated with Feathers v5 or later now exports a client file, including the types you defined in [schemas](./schema/index.md) on the server. For more information see the CLI guide (tbd)
31
29
32
30
## Node
33
31
@@ -72,7 +70,7 @@ Then in the main application file:
@@ -104,45 +104,29 @@ import socketio from '@feathersjs/socketio'
104
104
105
105
constapp=feathers()
106
106
107
-
app.configure(socketio({
108
-
pingInterval:10000,
109
-
pingTimeout:50000
110
-
}))
107
+
app.configure(
108
+
socketio({
109
+
pingInterval:10000,
110
+
pingTimeout:50000
111
+
})
112
+
)
111
113
```
112
114
113
115
## Module loaders
114
116
115
-
All modules in the `@feathersjs` namespace are using ES6. They must be transpiled to support browsers that don't completely support ES6. Most client-side module loaders exclude the `node_modules` folder from being transpiled and have to be configured to include modules in the `@feathersjs` namespace.
117
+
Feathers client libraries work with the out-of-the-box configuration of all modern module loaders like Webpack, Parcel, Vite etc.
116
118
117
119
### Webpack
118
120
119
-
For Webpack, the recommended `babel-loader` rule normally excludes everything in `node_modules`. It has to be adjusted to skip `node_modules/@feathersjs`. In the `module``rules` in your `webpack.config.js`, update the `babel-loader` section to this:
120
-
121
-
```js
122
-
{
123
-
test:/\.jsx?$/,
124
-
exclude:/node_modules(\/|\\)(?!(@feathersjs))/,
125
-
loader:'babel-loader'
126
-
}
127
-
```
121
+
No additional setup should be necessary to use the Feathers client modules in a standard configuration with Webpack.
128
122
129
123
### create-react-app
130
124
131
-
[create-react-app](https://github.com/facebookincubator/create-react-app) uses [Webpack](#webpack) but does not allow to modify the configuration unless you eject. If you do not want to eject, use the [@feathersjs/client](https://github.com/feathersjs/client) module instead.
132
-
133
-
```
134
-
npm i --save @feathersjs/client
135
-
```
136
-
137
-
You can then import the transpiled libraries from this package:
138
-
139
-
```js
140
-
importfeathersfrom"@feathersjs/client";
141
-
```
125
+
[create-react-app](https://github.com/facebookincubator/create-react-app) uses [Webpack](#webpack) and also no longer requires additional setup to load the individual Feathers clietn modules.
142
126
143
127
### Others
144
128
145
-
As mentioned above, `node_modules/@feathersjs` and all its subfolders must be included in the ES6+ transpilation step when using any module loader that is using a transpiler. For non-CommonJS formats (like AMD) version of Feathers and its client modules you can use the [@feathersjs/client module](#feathersjsclient).
129
+
For non-CommonJS formats (like AMD) version of Feathers and its client modules the [@feathersjs/client module](#feathers-client) can be used.
146
130
147
131
## @feathersjs/client
148
132
@@ -157,32 +141,29 @@ As mentioned above, `node_modules/@feathersjs` and all its subfolders must be in
157
141
npm install @feathersjs/client --save
158
142
```
159
143
160
-
`@feathersjs/client` is a module that bundles the separate Feathers client-side modules into one file which can be loaded directly in the browser through a `<script>` tag and in most other JavaScript runtimes.
144
+
`@feathersjs/client` is a module that bundles the separate Feathers client-side modules into one file which can be loaded directly in the browser through a `<script>` tag and in most other JavaScript runtimes.
161
145
162
-
<BlockQuotetype="danger">
146
+
<BlockQuotetype="danger"label="Important">
163
147
164
-
If you are using a module loader like Webpack, Parcel etc.and in React Native and Node you **should not use**`@feathersjs/client`. Use the individual client modules instead. See the [REST client](./client/rest.md) and [Socket.io client](./client/socketio.md) chapters for invidual module use. This will give you the most modern builds and reduce bundle size and build/load time.
148
+
If you are using a module loader like Webpack, Parcel etc., create-react-app and in React Native and Node you **should not use**`@feathersjs/client`. Use the individual client modules instead. This will give you the most modern builds and reduce bundle size and build/load time. See the [REST client](./client/rest.md) and [Socket.io client](./client/socketio.md) chapters for invidual module use.
165
149
166
150
</BlockQuote>
167
151
168
152
Here is a table of which Feathers client module is included:
When you are loading `@feathersjs/client` you do not have to install or load any of the other modules listed in the table above.
180
163
181
164
### When to use
182
165
183
-
`@feathersjs/client` can be used directly in the browser using a `<script>` tag without a module loader as well as with module loaders that do not support CommonJS (like RequireJS).
184
-
185
-
If you are using the Feathers client with Node or React Native you should follow the steps described in the [Node](#node) and [React Native](#react-native) sections and __not__ use `@feathersjs/client`.
166
+
`@feathersjs/client` can be used directly in the browser using a `<script>` tag without a module loader as well as module loaders that do not support CommonJS (like RequireJS).
0 commit comments