Server Side Functions

Functions in this section are only useable in the Remix Loader.

getUser

This function returns a user class, if the user is logged in. Otherwise, it returns undefined.

If you want to guarantee that the user's information is fresh (useful for sensitive routes), you can set forceRefresh to true.

Optional Arguments

Name
forceRefresh
Type
boolean
Description
An optional argument to specify if the user's information should be refreshed on render.

Example

import { auth } from '../auth/auth.server'

export const loader = async ({ request, context }: LoaderFunctionArgs) => {
   const user = await auth.getUser(
       request, 
       context,
       { forceRefresh: true }
   )
   return json({ user: user })
}

const WelcomeMessage = async () => {
   const { user } = useLoaderData<typeof loader>()

   if (user) {
       return <div>Hello {user.firstName}!</div>
   } else {
       return <div>Please log in to be welcomed</div>
   }
}

getUserOrRedirect

This function returns a user class, if the user is logged in. Otherwise, it redirects the user to the login page.

Optional Arguments

Name
postLoginRedirect
Type
string
Description
An optional argument to specify where the user should be redirected to after they login. If not specified, the user will be redirected to your default Application URL.
Name
forceRefresh
Type
boolean
Description
An optional argument to specify if the user's information should be refreshed on render.

Example

import { auth } from '../auth/auth.server'

export const loader = async ({ request, context }: LoaderFunctionArgs) => {
    // If the user is not logged in, they will be redirected to the login page
    const user = await auth.getUserOrRedirect(
        request, 
        context, 
        { postLoginRedirect: "/foo"}
    )
    return json({ user: user })
}

const WelcomeMessage = async () => {
    const { user } = useLoaderData<typeof loader>()

    return <div>Hello {user.firstName}!</div>
}

getUserWithAccessToken

Similar to getUser but also returns an access token, if the user is logged in. Otherwise, user returns undefined.

If you want to guarantee that the user's information is fresh (useful for sensitive routes), you can set forceRefresh to true.

Optional Arguments

Name
forceRefresh
Type
boolean
Description
An optional argument to specify if the user's information should be refreshed on render.

Example

import { auth } from '../auth/auth.server'

export const loader = async ({ request, context }: LoaderFunctionArgs) => {
   const { user, accessToken } = await auth.getUserWithAccessToken(
       request, 
       context,
       { forceRefresh: true }
   )
   return json({ user: user, accessToken: accessToken })
}

const WelcomeMessage = async () => {
   const { user, accessToken } = useLoaderData<typeof loader>()

   if (user) {
       return <div>Hello {user.firstName}!</div>
   } else {
       return <div>Please log in to be welcomed</div>
   }
}

getUserWithAccessTokenOrRedirect

Similar to getUserOrRedirect but also returns an access token, if the user is logged in. Otherwise, it redirects the user to the login page.

Optional Arguments

Name
postLoginRedirect
Type
string
Description
An optional argument to specify where the user should be redirected to after they login. If not specified, the user will be redirected to your default Application URL.
Name
forceRefresh
Type
boolean
Description
An optional argument to specify if the user's information should be refreshed on render.

Example

import { auth } from '../auth/auth.server'

export const loader = async ({ request, context }: LoaderFunctionArgs) => {
    // If the user is not logged in, they will be redirected to the login page
    const { user, accessToken } = await auth.getUserWithAccessTokenOrRedirect(
        request, 
        context, 
        { postLoginRedirect: "/foo"}
    )
    return json({ user: user, accessToken: accessToken })
}

const WelcomeMessage = async () => {
    const { user, accessToken } = useLoaderData<typeof loader>()

    return <div>Hello {user.firstName}!</div>
}

Gets the URL of the signup page. This is useful if you want to link to the signup page from your application.

Arguments

Name
redirectBackToPath
Type
string
Description
The path to redirect the user to after they sign up. Set the default in your Dashboard.
Name
userSignupQueryParameters
Type
object
Description
Query parameters to add to the signup URL.

import { auth } from '../auth/auth.server'

export const loader = async () => {
    const user = await auth.getUser(request, context)
    if (!user) {
        return redirect(auth.getSignupPageUrl({
            redirectBackToPath: "/foo",
            userSignupQueryParameters: {
                "ref": "my-cool-blog-post"
            }
        }))
    }
    ...
}

Gets the URL of the login page. This is useful if you want to link to the login page from your application.

Arguments

Name
redirectBackToPath
Type
string
Description
The path to redirect the user to after they log in. Set the default in your Dashboard.
Name
userSignupQueryParameters
Type
object
Description
Query parameters to add to the login URL.

import { auth } from '../auth/auth.server'

export const loader = async () => {
    const user = await auth.getUser(request, context)
    if (!user) {
        return redirect(auth.getLoginPageUrl({
            redirectBackToPath: "/foo",
            userSignupQueryParameters: {
                "ref": "my-cool-blog-post"
            }
        }))
    }
    ...
}

getAccountPageUrl

Gets the URL of the account page. This is useful if you want to link to the account page from your application.

Arguments

Name
redirectBackToUrl
Type
string
Description
The URL to redirect the user to when they click the back button on the account page

export const loader = async () => {
    const accountUrl = auth.getAccountPageUrl({
        redirectBackToUrl: "http://localhost:3000/foo",
    })
    return json({ accountUrl: accountUrl })
}

getOrgPageUrl

Gets the URL of the organization page for a given org ID. If an org ID is not provided, one is chosen automatically.

Arguments

Name
orgId
Type
string
Description
The ID of the organization to get the URL for
Name
redirectBackToUrl
Type
string
Description
The URL to redirect the user to when they click the back button on the account page

export const loader = async () => {
    const orgPageUrl = auth.getOrgPageUrl("my-org-id", {
        redirectBackToUrl: "http://localhost:3000/foo",
    })
    return json({ orgPageUrl: orgPageUrl })
}

getCreateOrgPageUrl

Gets the URL of the create organization page. This is useful if you want to link to the create organization page from your application.

Arguments

Name
redirectBackToUrl
Type
string
Description
The URL to redirect the user to when they click the back button on the account page

export const loader = async () => {
    const createOrgPageUrl = auth.getCreateOrgPageUrl({
        redirectBackToUrl: "http://localhost:3000/foo",
    })
    return json({ createOrgPageUrl: createOrgPageUrl })
}

getSetupSAMLPageUrl

Gets the URL of a page to setup SAML for the given org ID.

Arguments

Name
orgId *
Type
string
Description
The ID of the organization to get the URL for
Name
redirectBackToUrl
Type
string
Description
The URL to redirect the user to when they click the back button on the account page

export const loader = async () => {
   const setupSAMLPageUrl = auth.getSetupSAMLPageUrl("my-org-id", {
       redirectBackToUrl: "http://localhost:3000/foo",
   })
   return json({ setupSAMLPageUrl: setupSAMLPageUrl })
}

Using PropelAuth Backend APIs

Our backend APIs allow you to do things like block users, send invitations, and more. You can use our APIs like so:

export const loader = async () => {
  const orgQueryRes = await auth.api.fetchOrgByQuery({
    name: "acme"
  })
  return json({ orgQueryRes: orgQueryRes })
}