Logo
Frontend
Backend 

  • Backend Libraries

  • APIs

  • Frontend Libraries

  • Fullstack Libraries

  • Backend Libraries

  • Sign in

    • 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>
}

    getSignupPageUrl

    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"
            }
        }))
    }
    ...
}

    getLoginPageUrl

    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 })
}