Unable to get netlify identity to work with local development

[tobowers]

Hello! I’m trying to do some local development with the GitHub - netlify/netlify-identity-widget: A zero config, framework free Netlify Identity widget but using the oauth apps takes me back to the root site away from localhost. I’ve read a few other forum posts and Dev mode: External provider login redirects to main site. · Issue #86 · netlify/netlify-identity-widget · GitHub to realize maybe that will never work.

However the email login also requires that the email is confirmed and the link in the email takes me to the root site too.

What’s the recommended way to develop with identity?

[hrishikesh]

From what I know, you’d have to create an account, etc. in the production website and then login in localhost.

[jonsully]

Greetings @tobowers!

Welcome to The Community!

It is possible to work with Identity locally, but it takes a little finagling. Before walking you through that, could you give me a little context into what stack you’re building on? That may inform some of the advice I would give.

–
Jon

[tobowers]

Thanks! It’s a react 17 app with a small serverless app. No database or anything. We use react routing with hash too (I’ve seen that in other posts as a problem)

[jonsully]

Awesome!

Let me get to your answers then.

Can you develop locally with Netlify Identity?

Yes! But it’s not super straightforward when it comes to setting up a new account from your local dev. For starters, it’s critical to be aware that your site gets one Netlify Identity instance, and that instance is shared between any and all environments. Developing with Netlify Identity locally means that you’ll be hitting your production Identity instance. I don’t consider this a very big deal, it doesn’t grant you any sort of ability to muck with your production data, but it’s good to know.

So when actually using Netlify Identity in local development, there are two ways to get started. First, you can just log in with the same credentials you use on your production environment. Since it’s the same underlying Identity instance, you should be able to login without issue. If you don’t have a registered user in your Identity instance, you can follow the registration steps locally, but you need to use your command line. When you register for an account, whether locally or on your production environment, you are sent a confirmation email. Two options at this point:

1. Click that link and confirm your account then switch back to your local dev server and log in with that account
2. Don’t click, copy that link and hit from your favorite command line HTTP client (I use httpie). It should be a mandrillapp.com link. You should see a redirection take place and a Location: header come back with your production URL and a confirmation_token:

dev$ http https://mandrillapp.com/track/click/31128206/random-site-name.netlify.app?p=eyJzIjoidVZVUTZKUTlHS2t1MURaLXo4cnJ5QkN0c28wIiwidiI6MSwicCI6IntcInVcIjozMTEyODIwNixcInZcIjoxLFyY2U2MzQxZmI0ZjMyODQyYTVkZmJhZDJlZjQ0N1wiLFwidXJsX2lkc1wiOltcIjBjZjc3MGFhYmVkOThjODQ1YTkzMGUwMTZlZmRjOTEzYjY0Yzk0ZTJcIl19In0

HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
Connection: keep-alive
Host: mandrillapp.com
User-Agent: HTTPie/2.3.0



HTTP/1.1 302 Moved Temporarily
cache-control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Tue, 29 Dec 2020 07:24:04 GMT
expires: Thu, 19 Nov 1981 08:52:00 GMT
location: https://random-site-name.netlify.app/#confirmation_token=UIs1dRjxAzWxqNB1FFZDVQ
pragma: no-cache
server: nginx/1.4.6 (Ubuntu)
transfer-encoding: chunked
vary: Accept-Encoding

In this case, it’s the https://random-site-name.netlify.app/#confirmation_token=UIs1dRjxAzWxqNB1FFZDVQ above. If you take off the https://random-site-name.netlify.app and replace it with localhost:YOUR_PORT, you can achieve the confirmation process purely from local development.

---

In terms of other helpful options for making Netlify Identity more integrated with your site, I actually just released react-netlify-identity-gotrue, which adds pure-React bindings for Identity into any React app (including Gatsby and Next, etc.). Check it out, it may help you have a simpler dev process since you’re using React

Hope that helps!

–
Jon

[tobowers]

Super helpful! going to go try it now.

[tobowers]

So… still some trickiness around using react router but getting there.

[jonsully]

Feel free to post back if you have particular issues! Always happy to help.

[ulsting]

Hey there @jonsully I am having trouble finding documentation on following the registration steps to create a new user with the CLI. I am specifically trying to test my identity-signup function so from your previous post I think the only way to do that locally is to create a user locally with the CLI but let me know if there is an easier way! Thanks.

[hrishikesh]

@jonsully

Developing with Netlify Identity locally means that you’ll be hitting your production Identity instance. I don’t consider this a very big deal, it doesn’t grant you any sort of ability to muck with your production data, but it’s good to know.

This might not be entirely true.

Netlify Identity charges for invite-only and active users. This might seem straightforward, but this also counts deleted users.

This means, suppose you invite 5 users, delete one of them. You’d think you’ve 4 invite-only users and are free to invite 1 more. But that’s not it. When you invite another user the count actually goes up to 6 users and thus, is chargeable.

This does reset after your billing cycle. So, after you delete one user, from the next billing cycle that would be counted as 4 invite-only users.

I thought I’d add this here so people don’t get confused with that. I agree you are not really mucking your production data as such, but if you go on adding and deleting users, it might turn into a problem.

[jonsully]

Well that’s an interesting tidbit I didn’t know. Neat!

---

@ulsting hey there

“CLI” is sort of an open term. I don’t think you can create Identity Users on a given Site via the Netlify-CLI tool (https://cli.netlify.com / netlify-cli - npm). I don’t think the Netlify “Open API” (https://open-api.netlify.com) supports adding Identity Users to a given Site either.

The only real way I’d suggest trying to accomplish that behavior is to sniff out the requests the Netlify Admin dashboard front-end PWA is making to the core Netlify Back-end and try to replicate those via cURL or another CLI tool. This process works fine and lots of folks do this (Netlify even recommends it in some places / previous responses) but do understand the security ramifications of it since you’ll be spoofing yourself (your personal Netlify user) rather than having an isolated OAuth client for your tooling.

Just based on watching the request log in my browser when I add a user to one of my site’s Identity user lists, I’m seeing a POST (makes sense) to api.netlify.com/api/v1/sites/<YOUR_SITE_ID>/identity/<YOUR_IDENTITY_INSTANCE_ID>/users/invite with the Authorization header containing my personal Bearer 123xyz123xyz token granted at login and a payload of:

{
  "invites": [
      { "email": "random_person@example.com" }
  ]
}

So, you may be able to go from there and craft something together YMMV! Hope that helps

–
Jon

[richclingman]

Thanks for the help. I hit a couple issues with the @jonsully localhost answer above.

• I took this too literally: “It should be a mandrillapp.com link.” – It should be a [your website domain] link.
• The site must have the netlify-identity-widget installed. I was bouncing between one localhost site that had the widget and one that didn’t.

Now it works! Thanks!