shadcn.io is not affiliated with official shadcn/ui
IP Restriction Login Block for React
A network check for a sign-in: type an IPv4 address and real CIDR maths says which of three allowed ranges holds it, then either continues or asks for access with a reason.
Installation
Overview
Show people why a network is or isn't allowed, with this IP restriction login block for React with Base UI. It's the sign-in of Bursarly, a back-office finance app: a whole screen with the page's rails and one band across it, a centred header over two columns on wide screens and the address first on phones. One column holds an Input for a demo address, a verdict as a word with a glyph, and either what matched (the range, what it covers, your place in it) or a Textarea to ask for access, with the one Shine Button whose label follows the verdict. The other column lists three allowed ranges written as CIDR blocks, each with the addresses it covers worked out and a word, Matches or Outside, for the address you typed. The maths is real and short: an address is one number, a block of /25 keeps its first 25 bits, and an address is allowed when it lies between the block's first and last number. It's built from Field, Input, Textarea, Shine Button and Guides, with a CSS entrance only. For sign-ins limited to office networks, back-office tools and admin consoles.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The three ranges are typed constants and the address is whatever you type: the page never reads your own address, makes a request or stores anything. Pressing the button waits a moment and says what a real product would do ("Signed in, in this demo. Nothing was sent."). In a product, read the client address on your server, from the connection or from a header your own proxy sets, match it there and enforce it there: a browser must never be the one that decides.
How does the matching work?
Each address is turned into one number (the four parts as base 256), and each block into its first and last number: the base rounded down to a multiple of the block's size, and the size is 2 to the power of the bits the block leaves free. So 203.0.113.0/25 holds 128 addresses, 203.0.113.0 to 203.0.113.127, and 203.0.113.130 is just past it. The list shows the span for every block, and the note under it lists the sizes worked out from the three blocks.
Does it handle IPv6?
No: this block checks IPv4 only, and says so by asking for four numbers from 0 to 255. IPv6 blocks work the same way on 128 bits, which is past what a plain number holds in the browser, so a real version compares bit strings or uses a library on the server.
Why those addresses?
They are documentation ranges set aside by RFC 5737 (192.0.2.0/24, 198.51.100.0/24 and 203.0.113.0/24), so they can never belong to a real network. Replace the BLOCKS with your own CIDR blocks and change START and NEAR to match.
What does Request access do?
Outside the three ranges the page asks for a reason of at least ten characters, names the problem under the field and focuses it when it is short, then says the request would go to the admin. Nothing is sent; wire the submit to your own request or ticketing endpoint.
Is it usable with a keyboard and a screen reader?
Yes. Both fields are labelled, a problem is read with its field, and the page's one status line says the verdict about 600 milliseconds after you stop typing and says each result after a press. Matches and Outside are words as well as glyphs, so no colour carries the verdict.
Related
- Pro
A sign-in gate for a VPN-only console: a connection check that fails twice with different diagnoses and then passes, three numbered steps, a demo switch to pretend, and troubleshooting answers.
- Pro
A sign-in that works only in set hours: a week grid of 24 hour cells for each day with a derived next window, a readout for any cell, and a request for off-hours access.
- Pro
Risk Assessment Login
Risk checksA sign-in page that shows why it is asking: six weighted signals add up to a score, a three-zone band marks it, and the question follows the zone: nothing, a six-digit code, or a block.
- Pro
Location Verification Login
Risk checksA split sign-in page that asks whether a sign-in from far away was you: a drawn map with two places and an arc, a list of facts, and two answers, This is me and Not me.
- Pro
IP Allowlist Account
Sessions and devicesAn allowlist built from the networks of the last 12 sign-ins and rehearsed against them: seen networks with Allow, the allowed set, one field to add a range, how many sign-ins would pass or be blocked, and a switch refused while your own address is outside the list.
- Pro
Account Locked Login
Recovery and resetA locked-account page for a point-of-sale system that draws the lockout ladder, marks the rung the account is on with a fixed unlock time, and offers an unlock link by email or a password reset.