Add graphql and sdk coding samples

Author: hola-soy-milk

content/4.auth/5.email-login.md

@@ -22,13 +22,41 @@ Read more about creating users.
 
 You can authenticate as a user to receive a standard token.
 
-```json [POST /auth/login]
-{
-  "email": "[email protected]",
-  "password": "d1r3ctu5"
+## Logging In
+
+::snippets
+#rest
+```bash [Terminal]
+curl \
+--request POST \
+--header 'Content-Type: application/json' \
+--data '{ "email": "[email protected]", "password": "d1r3ctu5" }' \
+--url 'https://directus.example.com/auth/login'
+```
+
+#graphql
+```graphql
+mutation {
+	auth_login(email: "[email protected]", password: "d1r3ctu5") {
+		access_token
+		refresh_token
+	}
 }
 ```
 
+#sdk
+```js
+import { createDirectus, authentication } from '@directus/sdk';
+
+const email = "[email protected]";
+const password = "d1r3ctu5";
+
+const client = createDirectus('http://directus.example.com').with(authentication());
+
+const token = await client.login(email, password);
+```
+::
+
 If the user has [two-factor authentication](/auth/2fa) enabled, an `otp` (one-time password) can be passed as an additional property. The response will contain a standard token.
 
 :partial{content="snippet-auth-token"}
@@ -37,56 +65,176 @@ If the user has [two-factor authentication](/auth/2fa) enabled, an `otp` (one-ti
 
 <!-- TODO: Clarify the different modes -->
 
-If you wish to receive and store a session cookie, add a `mode` property when logging in. The token won't be returned in JSON response.
+If you wish to receive and store a session cookie, add a `mode` property when logging in. 
 
+::snippets
+#rest
 ```json [POST /auth/login]
 {
   "email": "[email protected]",
-  "password": "d1r3ctu5",
-  "mode": "session"
+  "password": "d1r3ctu5"
 }
 ```
+The token won't be returned in JSON response.
+
+#graphql
+```graphql
+mutation {
+	auth_login(email: "[email protected]", password: "d1r3ctu5", mode: "session") {
+		access_token
+		refresh_token
+	}
+}
+```
+
+#sdk
+```js
+import { createDirectus, authentication } from '@directus/sdk';
+
+const email = "[email protected]";
+const password = "d1r3ctu5";
+
+const client = createDirectus('http://directus.example.com').with(authentication());
+
+const token = await client.login(email, password, {mode: "session"});
+```
+::
 
 ## Refresh
 
 Retrieve a new access token by refreshing it.
 
+::snippets
+#rest
 ```json [POST /auth/refresh]
 {
   "refresh_token": "Xp2tTNAdLYfnaAOOjt3oetyCWtobKKUIeEXj..."
 }
 ```
 
+#graphql
+
+```graphql
+mutation {
+	auth_refresh(refresh_token: "refresh_token") {
+		access_token
+		refresh_token
+	}
+}
+```
+
+# sdk
+
+```js
+import { createDirectus, authentication, rest, refresh } from '@directus/sdk';
+
+const client = createDirectus('directus_project_url').with(authentication()).with(rest());
+
+// refresh http request using json
+const result = await client.request(refresh('json', refresh_token));
+```
+
 ### Refreshing a Cookie
 
 You do not need to provide the `refresh_token`, but you must specify the `mode`.
 
+::snippets
+#rest
 ```json [POST /auth/refresh]
 {
   "mode": "session"
 }
 ```
 
+#graphql
+```graphql
+mutation {
+	auth_refresh(refresh_token: "refresh_token") {
+		access_token
+		refresh_token
+	}
+}
+```
+
+#sdk
+```js
+import { createDirectus, authentication, rest, refresh } from '@directus/sdk';
+
+const client = createDirectus('directus_project_url').with(authentication()).with(rest());
+
+// refresh http request using a cookie
+const result = await client.request(refresh('cookie'));
+```
+::
+
 ## Logout
 
 Invalidate the refresh token and destroy the user's session.
 
+::snippets
+#rest
 ```json [POST /auth/logout]
 {
   "refresh_token": "Xp2tTNAdLYfnaAOOjt3oetyCWtobKKUIeEXj..."
 }
 ```
 
+#graphql
+```graphql
+mutation {
+	auth_logout(refresh_token: "Xp2tTNAdLYfnaAOOjt3oetyCWtobKKUIeEXj...")
+}
+```
+
+#sdk
+```js
+import { createDirectus, authentication, rest, logout } from '@directus/sdk';
+
+const client = createDirectus('directus_project_url').with(authentication()).with(rest());
+
+const result = await client.logout();
+```
+
+You can also log out using the http request mechanism:
+
+```js
+import { createDirectus, authentication, rest, logout } from '@directus/sdk';
+
+const client = createDirectus('directus_project_url').with(authentication()).with(rest());
+
+const result = await client.request(logout(refresh_token));
+```
+::
+
 ### Invalidating a Cookie
 
 You do not need to provide the `refresh_token`, but you must specify the `mode`. This will immediately invalidate and delete the cookie.
 
+::snippets
+#rest
 ```json [POST /auth/logout]
 {
   "mode": "session"
 }
 ```
 
+#graphql
+```graphql
+mutation {
+	auth_logout(mode: "session")
+}
+```
+
+#sdk
+```js
+import { createDirectus, authentication, rest, logout } from '@directus/sdk';
+
+const client = createDirectus('directus_project_url').with(authentication()).with(rest());
+
+const result = await client.logout({mode: "session"});
+```
+::
+
 ## Password Reset
 
 Requesting a password reset will send an email to the user with a URL to the Data Studio to reset their password.
@@ -111,13 +259,36 @@ When using the request reset password endpoint, add a `reset_url` property. The
 
 Your application must extract this value, collect the new user's password, and send both to the reset password endpoint.
 
+::snippets
+#rest
 ```json [POST /auth/password/reset]
 {
   "token": "Xp2tTNAdLYfnaAOOjt3oetyCWtobKKUIeEXj",
   "password": "d1r3ctu5!"
 }
 ```
 
+#graphql
+
+```graphql
+mutation {
+	auth_password_reset(token: "Xp2tTNAdLYfnaAOOjt3oetyCWtobKKUIeEXj", password: "d1r3ctu5!")
+}
+```
+
+#sdk
+
+```js
+import { createDirectus, rest, passwordReset } from '@directus/sdk';
+
+const client = createDirectus('directus_project_url').with(rest());
+
+const reset_token = "Xp2tTNAdLYfnaAOOjt3oetyCWtobKKUIeEXj";
+const new_password = "d1r3ctu5!";
+
+const result = await client.request(passwordReset(reset_token, new_password));
+```
+
 ::callout{type="dev-docs" url="/configuration/security-limits"}
 The `PASSWORD_RESET_URL_ALLOW_LIST` environment variable must be configured.
 ::