Netlify Identity Redirect After Login

Get Help and Help Others
1

A discussion came up in Discord with @eastofwestern about how one might redirect a user after a successful login using Netlify Identity (or really most other Auth Providers save Auth0 since it supports this out of the box).

@Tobbe and I noted two approaches that we felt we should share since it’s a small snippet not really a cookbook – but let us know if you think perhaps it should be part of the docs instead.:

Redirect to a Names Route

Here the user is brought to the posts route after login.

Note: If the route you specify in navigate is a private route to which they do not have role permission, then they will be taken to the private unauthenticated route instead.

  import { useAuth } from '@redwoodjs/auth'
  import { navigate, routes } from '@redwoodjs/router'

  const { logIn, logOut, isAuthenticated } = useAuth()

 ...

  const doLogIn = async () => {
    await logIn()
    navigate(routes.posts())
  }

Redirect the user to the page they tried to access before being denied and then logging in

Also, let’s say you tried to go to /admin/posts and were challenged such that the url is

http://localhost:8910/?redirectTo=/admin/posts

Note: Redwood router will automatically inject that redirectTo as part of denying route access.

You can do something like:

  import { useAuth } from '@redwoodjs/auth'
  import { navigate, useLocation } from '@redwoodjs/router'

   ...

  const { search } = useLocation()

  const parseSearch = (search) => {
    const searchParams = new URLSearchParams(search)

    return [...searchParams.keys()].reduce(
      (params, key) => ({
        ...params,
        [key]: searchParams.get(key),
      }),
      {}
    )
  }

  const doLogIn = async ({ search }) => {
    const searchKeys = parseSearch(search)
    await logIn()
    navigate(searchKeys.redirectTo)
  }

And that will send you to the “redirectTo” you intended to view before being asked to login which in this case is /admin/posts.

Note: parseSearch is taken from the Redwood router package and ideally
searchKeys.redirectTo should be checked before call navigate.

1 Like
2

Thanks for sharing! This is a neat recipe and practically very useful!

One thing that’s not clear - is where to place these? Ive added a middleware function when I needed to handle email verification with netlify auth (because it uses a hash param) and I placed this function as a custom hook actually inside the Routes.js

Should these functions go in a similar place?

Def think this is a good use case for a cookbook.

1 Like
3

I was thinking about that … I have not tried, but I considered maybe putting it in a Layout?

Or I might make a component for a LoginButton?

Good question.

4

How about in the Router component? Because a redirect can happen anywhere.

5

Def think this is a good use case for a cookbook.

I’d love this! Having this exact issue now. @viperfx @dthyresson did you ever implement this? I’d love to see how/where you did it. Thanks!

6

Calling navigate() with a route after await logIn() and await logOut() appears to work, even if it’s the same route. I’m just redirecting to the home page on both login and logout here.

1 Like
7

The next RW release will make some changes to how tokens are refreshed:

After login, a call to reauthenticate is made:

But in the above PR a change is made to how the token is fetched.

Perhaps will address this issue?