+
+
+
+Redirect based authentication is the default strategy in Faust.js. This strategy involves the user being redirected to WordPress to authenticate. Once the user has authenticated, the user is redirected back to the Next.js application with an authorization code that is then used to request a refresh and access token, thus completing the login process.
+
+This strategy is great for use cases where your authenticated users are admins/editors/etc. and do not necessarily need a "white label" login/register experience. Typically, you would use the redirect strategy if your primary reason for authentication is previews.
+
+Since Redirect based authentication is the default authentication method, there is no configuration needed on your end to use it. It comes out of the box, and you'll see it in action when using previews or the `useAuth` hook.
+
+### Local Based Authentication
+
+
+ 
+
+
+Local Based Authentication is the second strategy available in Faust.js. This strategy involves the user initiating a login request from the Next.js application via the `useLogin` hook. Upon successful login, `useLogin` returns an authorization code that is then used to request a refresh and access token, thus completing the login process.
+
+This strategy is great for use cases where you want to support a more "white label" login/register experience. This strategy routes un-authenticated requests to your specified Next.js login page. In addition, users who wish to login/register will not have to interact with WordPress or the WordPress backend at all, giving you the flexibility to implement and fine tune your user flow.
+
+To use this strategy, you'll need to configure your `faust.config.js` file to use the `local` authentication strategy, in addition to the route of your Next.js login page. Take the following `faust.config.js` file for example:
+
+```tsx title=faust.config.js {15,16}
+import { headlessConfig } from '@faustjs/core';
+
+if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) {
+ console.error(
+ 'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env file?',
+ );
+}
+
+/**
+ * @type {import("@faustjs/core").HeadlessConfig}
+ */
+export default headlessConfig({
+ wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
+ apiClientSecret: process.env.WP_HEADLESS_SECRET,
+ authType: 'local',
+ loginPagePath: '/login',
+});
+```
+
+We define the `authType` to `local` to indicate to the Faust.js config that we want to use the `local` strategy for authentication. We also define the `loginPagePath` to `/login` to indicate the route of the Next.js login page. This means un-authenticated requests will be redirected to the `/login` route in your Next.js application.
+
+In your `login.tsx` page, you could take advantage of the `useLogin` hook to initiate a login request to the WordPress backend:
+
+```tsx title=pages/login.tsx {9,18}
+import { client } from 'client';
+import { useState } from 'react';
+
+export default function Login() {
+ const { useLogin } = client.auth;
+ const [usernameEmail, setUserNameEmail] = useState('');
+ const [password, setPassword] = useState('');
+
+ const { login, isLoading, data, error } = useLogin();
+
+ const errorMessage = data?.error || error?.message;
+
+ return (
+
+ );
+}
+```
+
+The `useLogin` hook exports an object with the following properties:
+
+- `login`: a function that initiates a request to the WordPress backend for an authorization code that accepts two arguments: `usernameEmail`, which is either the user's username or email as a string, and `password` as a string.
+- `isLoading`: a boolean that indicates whether the login request is in progress.
+- `data`: the response data from the login request.
+- `error`: the error from the login request.
+
+For a more detailed explanation of the `useLogin` hook, see the [`useLogin` hook docs](/docs/next/reference/custom-hooks#uselogin) .
+
+Upon a successful login, a refresh token will be stored in a secure, http only cookie, as well as the access token in memory to use for subsequent authenticated requests. A login request can be confirmed it succeeded by checking for the `code` property in the `data` object.
+
+Additionally, if the login page URL contains a `redirect_uri` query parameter, the user will be redirected to the specified URL upon successful login.
+
+
+
+## Making Authenticated Requests
+
+In the Faust.js client, you can use `useQuery`, `usePost`, `usePage`, etc. to make a request to the WordPress backend.
+
+These are exported from the `client` like so:
+
+```tsx {1,4}
+import { client } from 'client';
+
+export default function Page() {
+ const { useQuery } = client;
+
+ return(
+ ...
+ )
+}
+```
+
+Requests using the above methodology will be un-authenticated.
+
+To make authenticated requests, use the `auth` property exported from the `client`. This is essentially a replica of the `client`, except every request gets called with an access token:
+
+```tsx {1,4,5}
+import { client } from 'client';
+
+export default function Page() {
+ const { useMutation, usePreview, useAuth } = client.auth;
+ const { isLoading, isAuthenticated } = useAuth();
+
+ if (isLoading) {
+ return loading...
; + } + + if (result.type === 'page') { + if (!result.page) { + return <>Not Found; + } + + return